03利用JavaScript实现tab切换

1.1 介绍

这里提供了一种实现选项卡的思路。在实现过程中首先考虑的是html结构，元素如何摆放，此外通过这样的摆放，通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听，当进行选项卡切换时，我们可以对所有内容进行隐藏，之后再对选中的内容进行显示以达到切换的效果。

1.2 实现的HTML代码

<div id="app">
        <ul id="tab-tilte" class="tab-tilte">
            <li class="active">标题一</li>
            <li>标题二</li>
            <li>标题三</li>
            <li>标题四</li>
        </ul>
        <div class="tab-content" id="tab-content">
            <div style="display: block;">内容一</div>
            <div style="display: none;">内容二</div>
            <div style="display: none;">内容三</div>
            <div style="display: none;">内容四</div>
        </div>
    </div>

1.3实现的CSS样式

    <style type="text/css">
        ul li {

            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .tab-tilte {
            width: 90%;
        }
        .tab-tilte li {
            float: left;
            width: 25%;
            padding: 10px 0;
            text-align: center;
            background-color: #f4f4f4;
            cursor: pointer;
        }
        /* 点击对应的标题添加对应的背景颜色 */
        .tab-tilte .active {

            background-color: #09f;
            color: #fff;
        }

        .tab-content div {

            float: left;
            width: 25%;
            line-height: 100px;
            text-align: center;
        }
    </style>

展示的静态效果（没有动效）:

预览1.png

1.4添加js代码

<script type="text/javascript">
          var oUi=document.getElementById("tab-tilte");
          var tabCon=document.getElementById("tab-content");
          var oLi=oUi.getElementsByTagName("li"); //获取tab标题下面的li集合
          var oDiv=tabCon.getElementsByTagName("div"); //获取tab内容面的div集合
          for(var i=0;i<oLi.length;i++){
              oLi[i].index=i; //定义index变量 以便于tab标题和tab内容互相对应
              oLi[i].onclick=function(){
                 for(var j=0;j<oLi.length;j++){

                      oLi[j].className="";
                      oDiv[j].style.display="none";
                  }
                  this.className="active"; //为当前的tab添加样式
                  oDiv[this.index].style.display="block";
              }
          }
    </script>

展示最终效果图:

预览2