选项卡包选项卡（传参）（无动画版）

一、效果图。

二、HTML+CSS。

<style>
*{ padding:0; margin:0; font-size:12px;}
li{list-style:none;}
a{ text-decoration:none;}
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

.box{ width:958px; border:1px solid #c6c6c6; height:328px; margin:90px auto;}
.left{ width:168px; float:left;}
.right{ width:790px; float:right; overflow:hidden; }

.list_btn li{ width:168px; height:80px; border-top:1px solid #fff; border-bottom:1px solid #c6c6c6; background:#e7e7e7; font-size:30px; text-align:center; line-height:80px; color:#333; cursor:pointer; font-weight:bold;}
.list_btn .active{ background:#fff;}

.list_box{ display:none;}
.list_box img{ width:790px; height:328px;}

.right_par{ position:relative; height:328px; display:none;}
.btn{ height:30px; width:820px; position:absolute; left:0; bottom:0;}
.btn li{ width:272px; border-right:1px solid #fff; background:#5a5a52; cursor:pointer;height:30px; float:left; color:#fff; font-size:14px; text-align:center; line-height:30px;}
.btn1 li{ width:197px;}
.btn2 li{ width:160px;}
.btn .curr{background:#ef3163;}
</style>

<div class="box">

<div class="left">
    <ul class="list_btn" id="list_btn">
        <li class="active">豪车</li>
        <li>家具</li>
        <li>壁纸</li>
        <li>蛋糕</li>
    </ul>
</div>
<div class="right" id="right">
    <div class="right_par" style="display:block;">
        <div class="list_par" id="list_par" >
            <div class="list_box" style="display:block"><img src="img/card1.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card2.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card3.jpg" alt="" /></div>
        </div>
        <ol class="btn" id="btn">
            <li class="curr">豪车一</li>
            <li>豪车二</li>
            <li>豪车三</li>
        </ol>
    </div>
    <div class="right_par">
        <div class="list_par" id="list_par1">
            <div class="list_box"><img src="img/card4.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card5.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card6.jpg" alt="" /></div>
            <div class="list_box" style="display:block"><img src="img/card7.jpg" alt="" /></div>
        </div>
        <ol class="btn btn1" id="btn1">
            <li>家具一</li>
            <li>家具二</li>
            <li>家具三</li>
            <li class="curr">家具四</li>
        </ol>
    </div>
    <div class="right_par">
        <div class="list_par" id="list_par2">
            <div class="list_box"><img src="img/card8.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card9.jpg" alt="" /></div>
            <div class="list_box" style="display:block"><img src="img/card10.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card11.jpg" alt="" /></div>
            <div class="list_box"><img src="img/card12.jpg" alt="" /></div>
        </div>
        <ol class="btn btn2" id="btn2">
            <li>壁纸一</li>
            <li>壁纸二</li>
            <li class="curr">壁纸三</li>
            <li>壁纸四</li>
            <li>壁纸五</li>
        </ol>
    </div>
    <div class="right_par">
        <div class="list_par" id="list_par3">
            <div class="list_box" style="display:block"><img src="img/cake1.jpg" alt="" /></div>
            <div class="list_box"><img src="img/cake2.jpg" alt="" /></div>
            <div class="list_box"><img src="img/cake3.jpg" alt="" /></div>
        </div>
        <ol class="btn" id="btn3">
            <li class="curr">蛋糕一</li>
            <li>蛋糕二</li>
            <li>蛋糕三</li>
        </ol>
    </div>
</div>
    
</div>

三、javaScript。

var oDiv =document.getElementById('right');
    var aDiv =oDiv.getElementsByTagName('div');
    var oUl =document.getElementById('list_btn');
    var aLi =oUl.getElementsByTagName('li');
    
    var aDivArr=[];
    for(var i=0;i<aDiv.length;i++){
        
        if(aDiv[i].className =='right_par'){
            aDivArr.push(aDiv[i]);
        }
    }
    for(var i=0;i<aLi.length;i++){
        aLi[i].index =i;
        aLi[i].onclick = function(){
            for(var i=0;i<aLi.length;i++){
                aLi[i].className ='';
                aDivArr[i].style.display ='none';
            }
                this.className ='active';
                aDivArr[this.index].style.display ='block';
        }
    }

    fnParam('list_par','btn','onclick');
    fnParam('list_par1','btn1','onmouseover');
    fnParam('list_par2','btn2','onclick');
    fnParam('list_par3','btn3','onmouseover');
        
}

function fnParam(oDiv,oOl,evt){
    
    
    
    
    var oDivTwo =document.getElementById(oDiv);
    var aDivTwo =oDivTwo.getElementsByTagName('div');
    var oOl =document.getElementById(oOl);
    var aLiTwo =oOl.getElementsByTagName('li');
    
    
    var aDivTwoArr =[];
    
    //var oldLi=aLiTwo[0];   //必须和初始化同步
    
    
    
    for(var i=0;i<aDivTwo.length;i++){   //布局时有可能用到多个div，我这里布局就简单的用图片代替了。
        if(aDivTwo[i].className =='list_box'){
            aDivTwoArr.push(aDivTwo[i]);
        }
    }
    
    for(var i=0;i<aLiTwo.length;i++){
        aLiTwo[i].index =i
        aLiTwo[i][evt] = function(){
            for(var i=0;i<aLiTwo.length;i++){
                aDivTwoArr[i].style.display ='none';
                aLiTwo[i].className ='';
            }
                this.className ='curr';
                aDivTwoArr[this.index].style.display ='block';
                
                //oldLi.className ='';  //清空上一个，当前添加。
                //oldLi=this;
                //this.className ='curr';
        }
    }

四、jquery。

$(function(){

    $('#list_btn li').click(function(){
        
        $('#list_btn li').attr('class','');
        $('#right .right_par').css('display','none');
        $(this).attr('class','active');
        $('#right .right_par').eq($(this).index()).css('display','block');
    
    });
    fnParam('#btn li','#list_par .list_box','click');
    fnParam('#btn1 li','#list_par1 .list_box','mouseover');
    fnParam('#btn2 li','#list_par2 .list_box','click');
    fnParam('#btn3 li','#list_par3 .list_box','mouseover');

})
function fnParam(odiv,aDiv,evt){
    
    $(odiv).on(evt,function(){
        
        $(odiv).attr('class','');
        $(aDiv).css('display','none');
        $(this).attr('class','curr');
        $(aDiv).eq($(this).index()).css('display','block');
    
    });


}

转载于:https://blog.51cto.com/guoweishuai/1571782