关于一个很简单Tab的选项卡-原创手记-慕课网

刚毕业满一年的也就做了这一年的菜鸡切图的~ 哎呀~
第一次写个简单Tab选项卡难免有点害羞多学习其实也是为了记笔记啦~
/2016.8.10 17:00/

先写css啦

    <style type="text/css">
        body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
        ul,li{list-style:none;}
        .wrap{width:500px; margin:20px auto;}
        #tab_t{height:25px;border-bottom:1px solid #ccc;}
        #tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center;  border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
        #tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
        #tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
        #tab_c div{ display: none}
    </style>

接着写下html了


<div class="wrap">
    <ul id="tab_t">
        <li class="act">选择1</li>
        <li>选择2</li>
        <li>选择3</li>
        <li>选择4</li>
    </ul>
    <div id="tab_c">
        <div style="display: block">内容1</div>
        <div class="">内容2</div>
        <div class="">内容3</div>
        <div class="">内容4</div>
    </div>
</div>

先写下js的

  window.onload = function(){
       //常规的获取ID
        var tab_t = document.getElementById("tab_t");
        var tab_t_li = tab_t.getElementsByTagName("li");
        var tab_c = document.getElementById("tab_c");
        var tab_c_li = tab_c.getElementsByTagName("div");
       //第一次遍历循环 
        for(var i=0; i<tab_t_li.length; i++){
            tab_t_li[i].index=i;     //添加索引值
            tab_t_li[i].onclick=function(){
       //第二次循环重置样式（每一个都不添加样式内容也隐藏）
                for(var i=0;i<tab_t_li.length;i++){
                    tab_t_li[i].className='';
                    tab_c_li[i].style.display='';
                   }
                tab_t_li[this.index].className = 'act';
                tab_c_li[this.index].style.display = 'block';
                 }
         }
    }

再来写下jq 不要忘记了加载jq哦

 $(function(){
     var $Tab_li= $('#tab_t li');
     $Tab_li.click(function(){
         $(this).addClass('act').siblings().removeClass('act');
          var index =$Tab_li.index(this);
         $('#tab_c div').eq(index).show().siblings().hide();
     })
 })