jq選項卡的實現原理
阿新 • • 發佈:2019-02-04
<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>