简单的jquery选项卡功能

来源：互联网发布：oral电动牙刷知乎编辑：程序博客网时间：2024/06/16 10:56

最近正在看学习jquery 选项卡功能只是实现出来可能并不完善或者合理

<div style="tab">       <div style="tabtop">    <div class="tabs">   <li class="tabsshow">第一个标题</li>   <li>第二个标题</li>   <li>第三个标题</li>   </div>      </div>   <div style="tabbottom">   <div class="tabc tabcshow">内容1</div>   <div class="tabc">内容2</div>   <div class="tabc">内容3</div>   </div>   </div>

.tab{width: 500px;}.tabtop{width: 500px; height: 50px; background: #dcdcdc;}'.tabbottom{width: 100%;}.tabs li{ width: 33%; float: left; line-height: 50px; }
.tabc{ width: 100%; display: none; }.tabsshow{background: #ddffcc;}.tabcshow{display: block;}

$('.tabs li').mouseover(function(){ var index=$(this).index();   //获取当前的索引值 $('.tabs li').eq(index).css('background','#ddffcc').siblings().css('background','none');  //给tab标题加高亮样式并取消同胞元素的样式 $('.tabc').eq(index).show().siblings().hide();  //tab当前的内容显示 同胞元素隐藏 })

阅读全文

0 0