首页 > 代码库 > 选项卡包选项卡（传参）（无动画版）
选项卡包选项卡（传参）（无动画版）
一、效果图。
二、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="http://www.mamicode.com/img/card1.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card2.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card3.jpg" /></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="http://www.mamicode.com/img/card4.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card5.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card6.jpg" /></div>
<div class="list_box" style="display:block"><img src="http://www.mamicode.com/img/card7.jpg" /></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="http://www.mamicode.com/img/card8.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card9.jpg" /></div>
<div class="list_box" style="display:block"><img src="http://www.mamicode.com/img/card10.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card11.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/card12.jpg" /></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="http://www.mamicode.com/img/cake1.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/cake2.jpg" /></div>
<div class="list_box"><img src="http://www.mamicode.com/img/cake3.jpg" /></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‘);
});
}
本文出自 “帅帅” 博客，谢绝转载！
选项卡包选项卡（传参）（无动画版）