<style>
.none{display:none;}
.tab_menu{width:300px;height:30px;border:1px solid red;}
.div{width:60px;height:30px;float:left;margin-right:10px;cursor:pointer;background:lightgreen;line-height:30px;}
.tab_box , .tab_box>div{width:300px;height:300px;border:1px solid lightblue;}
.sel{background:red;}
</style>
<div>
<div class="tab_menu">
<div class="div">菜单一</div>
<div class="div">菜单二</div>
<div class="div">菜单三</div>
</div>
<div class="tab_box">
<div>111111111111111111111111</div>
<div class="none">222222222222222222222222</div>
<div class="none">333333333333333333333333</div>
</div>
</div>
<script>
$('.tab_menu').children().mouseover(function(){
$(this).addClass('sel').siblings().removeClass('sel'); //改变颜色
var id = $(this).index(); //当前操作的元素索引值
$('.tab_box').children().eq(id).show().siblings().hide(); //当前显示,其他的隐藏。
});
</script>
jq选项卡的实现原理
最新推荐文章于 2022-04-13 10:30:49 发布