Question

HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）

如图所示，把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时，底下的内容是不一样的。这种效果如何利用代码实现？如果有具体的代码演示，就最好不过了
百度了一下，这叫【舌签效果】，也有人说叫【选项卡切换】。请问，如果不用JS和JQUERY，纯html+CSS代码能实现吗？





Answer 1

1、利用css的:hover

<div id="content">  
    这是原本的div层  
    <div id="show">  
        <p>这是鼠标移动上去后的div层</p>  
    </div>  
</div> 
<style type="text/css">  
        *{  
            margin: 0;  
            padding: 0;  
        }  
        #content{  
            background:#0CF;  
            height:200px;  
            width:200px;  
            margin-left: 20px;  
            margin-top: 20px;  
        }  
        #show{  
            width:200px;  
            height:200px;  
            margin-top: 20px;  
            background:#F09;  
            top:0px;  
            position:absolute;  
            opacity: 0;  
            display: block;  
            font-size: 12px;  
            transition: 0.3s;  
            -webkit-transition: .5s;  
            -moz-transition: .5s;  
        }  
        #content:hover #show{  
            color: #656e73;  
            opacity: 1;  
        }  
    </style>

Answer 2

最简单的就是你写三个切换标签，定位好，然后再在下面写三个div，每个div包含一个标签的内容，默认第一个显示，其他两个隐藏，然后通过js来移动到第一个标签上显示第一个div的内容，后面一样