zoukankan      html  css  js  c++  java
  • tab切换

    啥也不说了,直接上代码吧,争取每天一个小例子,加油~~~

    html代码:

     1 <div class="tabContent">
     2     <ul class="tab clearFix">
     3         <li class="fl active">第一项</li>
     4         <li class="fl">第二项</li>
     5         <li class="fl">第三项</li>
     6     </ul>
     7     <div style="display: block;">11111</div>
     8     <div>22222</div>
     9     <div>33333</div>
    10 </div>

    css代码:

    1 ul.tab li{width: 100px;height: 40px;line-height: 40px;border: 1px solid #dbdbdb;text-align: center;}
    2 ul.tab li.active{border: 1px solid #45b035;}
    3 .tabContent div{width:306px;height: 300px;line-height:300px;text-align:center;color:#ff0;background: #dbdbdb;display: none;}

    js代码:

     1 function tabList(Tab){
     2     var Li=$(Tab).find("li");
     3     var Div=$(Tab).find("div");
     4     Li.on("click",function(){
     5         var index=$(this).index();
     6         Li.removeClass("active")
     7         Div.hide();
     8         $(this).addClass("active");
     9                 $(this).parent().siblings().eq(index).show();
    10     })
    11 }
    12 tabList(".tabContent");                

    运行效果:

  • 相关阅读:
    xiaota-banzhuren-login.vue-重置密码
    xiaota-banzhuren-login.vue
    xiaota-global-index
    xiaota-router-index
    tab表格嵌套tab表格
    xiaota-selectarr
    xiaota-getlunardate
    xiaota-format
    xitaota-DataTime
    xiaota-axioslmport
  • 原文地址:https://www.cnblogs.com/rain92/p/5583968.html
Copyright © 2011-2022 走看看