display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
</div><br><br><br>
<div class="tab_box">
<div>选项卡1:这里是1号内容区域</div>
<div class="hide">选项卡2：这里是2号内容区域</div>
<div class="hide">选项卡3：这里是3号内容区域</div>
</div>
</div>
<script>
// 加上鼠标的点击效果
$(function(){
$("ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
// 加上鼠标悬浮效果
$(function(){
$("div.tab_menu ul li").hover(function(){
$(this).addClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
},function(){
$(this).removeClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>
实现的效果如下：
