原生js解決選項卡里套選項卡的問題

今天來看一個稍微復雜的例子，選項卡里套選項卡，先來看看布局：

<div id="box">
       <div id="tabl" class="tabL">
           <a href="javascript:void(0)">模塊1</a>
           <a href="javascript:void(0)">模塊2</a>
           <a href="javascript:void(0)">模塊3</a>
           <a href="javascript:void(0)">模塊4</a>
       </div>
       <ul id="tabr" class="tabR">
           <li class="tabr_li">
               <div class="tab1-tit">
                   <a href="javascript:void(0)">tit1-1</a>
                   <a href="javascript:void(0)">tit1-2</a>
                   <a href="javascript:void(0)">tit1-3</a>
               </div>
               <ul class="tab1-con">
                   <li>con1-1</li>
                   <li style="display: none">con1-2</li>
                   <li style="display: none">con1-3</li>
               </ul>
           </li>
           <li class="tabr_li" style="display: none;">
               <div class="tab1-tit">
                   <a href="javascript:void(0)">tit2-1</a>
                   <a href="javascript:void(0)">tit2-2</a>
                   <a href="javascript:void(0)">tit2-3</a>
               </div>
               <ul class="tab1-con">
                   <li>con2-1</li>
                   <li style="display: none">con2-2</li>
                   <li style="display: none">con2-3</li>
               </ul>
           </li>
           <li class="tabr_li" style="display: none;">
               <div class="tab1-tit">
                   <a href="javascript:void(0)">tit3-1</a>
                   <a href="javascript:void(0)">tit3-2</a>
                   <a href="javascript:void(0)">tit3-3</a>
               </div>
               <ul class="tab1-con">
                   <li>con3-1</li>
                   <li style="display: none">con3-2</li>
                   <li style="display: none">con3-3</li>
               </ul>
           </li>
           <li class="tabr_li" style="display: none;">
               <div class="tab1-tit">
                   <a href="javascript:void(0)">tit4-1</a>
                   <a href="javascript:void(0)">tit4-2</a>
                   <a href="javascript:void(0)">tit4-3</a>
               </div>
               <ul class="tab1-con">
                   <li>con4-1</li>
                   <li style="display: none">con4-2</li>
                   <li style="display: none">con4-3</li>
               </ul>
           </li>
       </ul>
   </div>

簡單的css代碼：

<style>
    ul,li{list-style: none;margin: 0;padding:0;}
    a{text-decoration: none}
    #box{ padding:0; margin:0;width:1100px;height:320px; }
    .tabL{float:left;overflow:hidden;width:180px;height:320px;}
    .tabL a{float:left;width:178px;height:78px;border:1px solid #fedd00;text-align: center}
    .tabR{float:left;width:653px;height:320px;}
    .tabR li{background-color: #ff7e7e;width:653px;height:320px;position:relative;color:#fff;}
    .tab1-tit{width:100%;height:45px;line-height:45px;display:flex;position:absolute;bottom:0;z-index:99;overflow: hidden;border-top:1px solid #fff}
    .tab1-tit a{ -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;text-align: center;border-right:1px solid #fff}
    .active{background-color:#5FB878}
</style>

效果圖如下：

點擊左側的模塊1~模塊4，右邊的改變相對應的模塊內容，然后點擊模塊內容里的下方tit，同樣相對應的內容再次切換。

就像上圖顏色相對應的模塊內容。點擊黑色框選的，右邊黑色框選的相對應的出現，點擊當前黑色框選區域里的紅色框選的相對應的出現它的內容，當然里面的值可以換成圖片或者其他的，想要實現這個效果看js：

<script>
        window.onload=function(){
            var oBox=document.getElementById("box");
            var tabr=document.getElementById("tabr");
            var aTabL=document.getElementById("tabl");
            var aTit=aTabL.getElementsByTagName("a");
            var aCon=document.getElementsByClassName("tabr_li");

            for(var i=0;i<aTit.length;i++){
                aTit[i].index=i;
                aTit[i].onclick=function(){//點擊右邊tab
                    for(var i=0;i<aTit.length;i++){
                        aTit[i].className="";
                        aCon[i].style="display:none";
                    }
                    this.className="active";
                    aCon[this.index].style="display:block" ;
                   fn(this.index);//這里是得到當前選中的右側區域，並調用下面的函數
                }
            }

            function fn(index){
                var aTitSign=aCon[index];
                var aTitSignAs=aTitSign.getElementsByTagName("a");
                var aConSignLis=aTitSign.getElementsByTagName("li");
                for(var i=0;i<aTitSignAs.length;i++){
                    aTitSignAs[i].index=i;
                    aTitSignAs[i].onclick=function(){//點擊右邊內容里的下面的tab
                        var as= tabr.getElementsByTagName("a");
                        for(var i=0;i<as.length;i++){
                            as[i].className="";
                        }
                        for(var i=0;i<aTitSignAs.length;i++){
                            aConSignLis[i].style="display:none";
                        }
                        this.className="active";
                        aConSignLis[this.index].style="display:block";
                    }
                }
            }
        }
</script>

 好了，這個例子本來是昨天寫的，一下寫到今天，太晚了，今天就這樣了！