JQ tab 选项卡

原创 1130331201 随笔 html 69阅读 8 天前 举报

div

<div class="area_tab">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="area_input">
<div class="area_msg">1</div>
<div class="area_msg" style="display:none">12</div>
<div class="area_msg" style="display:none">13</div>
</div>

CSS

.area_tab{display: block;float: left;width: 100%;border-bottom: 1px solid #ddd;padding-bottom: 2px;}
.area_tab ul{display: block;float: left;width: 100%;}
.area_tab ul li{list-style:none; display: inline-block;float: left;padding: 0 15px;margin-right: 10px;line-height: 40px;background: #eee;color: #000;cursor: pointer;}
.area_tab ul li.active{color: #fff;background: #3bb4f2;}
.area_input,.area_input .area_msg{display: block;float: left;width: 100%;}

JQ

$('.area_tab ul li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var index = $('.area_tab ul li').index(this);
$('div.area_input > div').eq(index).show().siblings().hide();
});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复