tab选项卡效果2

源码：

<div class="tab">
<div class="tab_menu">
<ul>
<li class="on">实事</li>
<li>政治</li>
<li>体育</li>
</ul>
</div>
<div class="tab_box">
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
</div>
</div>

样式：

.tab{width: 300px; margin: 0 auto;}
.tab_menu{width: 300px; height: 30px; border: 1px solid #000;}
.tab_menu li{float: left; width: 99px; height: 30px; line-height: 30px; text-align: center; border-right:1px solid #333; cursor: pointer;}
.tab_menu li:last-child{border-right: none; width: 100px;}
.tab_menu li.on{background-color: #999;}
.tab .box{width: 300px; height: 200px;}
.tab_box > div{width: 300px; height: 200px; border: #333 solid; border-width: 0 1px 1px 1px; display: none;}
.tab_box > div:first-child{display: block;}

脚本：

$(function(){
$(".tab_menu ul li").click(function(){
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
var index=$(this).index(); //获取被按下按钮的索引值，index是从0开始的
$(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的内容
});
});

效果图：

转载于:https://www.cnblogs.com/DKL01/p/4884252.html