js与jquery的选项卡切换

选项卡切换是最常见的简单功能，主要在于选项切换时的display的状态切换。

以下是js的实现代码和效果图

注意的是ul中的第一个li标签和后面的div，之前找到的实例是关于ul和li的，之后的jquery也是关于ul和li，这里的js代码是我之前做某个网页的时候进行的初步改装，写的比较粗糙。重点在第一个设置的display设置成block，其余的设置成none，然后在鼠标划过的时候改变状态。这个代码比较初期，是刚学会的时候改编的，大家可以自己拿其它的标签什么的试试。

css和js：

* {margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}

     #tab-list{width: 100%px;height:470px;margin-top:40px;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li:hover{cursor: pointer;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

     #tab-list {border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
     
     .show{display: block;}
     .hide{display: none;}

    #tab-list ol{
        display:none;    
    }
    .tab-body{
        width:1000px;    
    }
    .tab1{
        width:270px;
        height:420px;
        margin-left:10px;
        margin-top:10px;
        margin-bottom:10px;    
        float:left;
    }
    .tab-img{
        width:250px;
        height:340px;
        margin-top:10px;
        margin-left:10px;    
    }
    .taba{
        color:#666;
        width:250px;
        
    }
    .tab-div{
        margin-left:10px;    
        border-left:none;
        margin-top:3px;
    }

<script type="text/javascript">
window.onload=function(){
var tab=document.getElementById("tab-list");
var div=tab.getElementsByTagName("ol");
var ul1=document.getElementById("ul1");
var ali=ul1.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onmouseover=function(){
for(var i=0;i<ali.length;i++){
ali[i].className="";
div[i].style.diaplay="none";
}
this.className="active";
for(var j=0;j<div.length;j++){
div[j].style.display="none";
}
div[this.index].style.display="block";
}
}
}
</script>

<div id="tab-list">
    <ul id="ul1">
        <li class="active">书籍</li><li>电脑</li><li>手表</li><li>手机</li>
    </ul>
    <ol style="display:block">
        <div class="tab1">
            <img src="Images/java.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=64" class="taba">Java从入门到精通 附光盘第3版</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/cyuyan.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=67" class="taba">全2册包邮【送源代码】 C语言程序设计教程+学习辅导第四版4版教材 谭浩强 c语言入门经典书籍</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/html.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=71" class="taba">html CSS JavaScript网站建设网站制作网页制作从入门到精通 网页设计书籍</a>
            </div>
        </div>  
         <div class="tab1">
            <img src="Images/1.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=1" class="taba">追风筝的人</a>
            </div>
        </div>    
    </ol>
    <ol>
        <div class="tab1">
            <img src="Images/lianxiang1.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=49" class="taba">Lenovo/联想 Yoga3 Yoga3 Pro13超薄笔记本电脑14英寸 11S超极本</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/daier1.gif" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=45" class="taba">Dell/戴尔 XPS13系列 XPS13-9350 XPS15-9550 超窄边框2016超极本</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/huashuo1.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=44" class="taba">Asus/华硕 S46E3317CM-SL A46C S46C K56C 固态硬盘超极本笔记本</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/hongji.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=53" class="taba">宏碁（acer）T5000 15.6英寸游戏笔记本电脑（四核i5-6300HQ 4G DDR4 1T GTX950M 2G独显 背光键盘 FHD）</a>
            </div>
        </div>    
    </ol>    
    <ol>
        <div class="tab1">
            <img src="Images/aigele.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=58" class="taba">艾戈勒（agelocer）瑞士原装进口 男士机械表 皮带男表全自动机械表 男士手表 超薄 经典白盘银钢带 7061A9</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/oumiqie.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=59" class="taba">美度(MIDO)手表 贝伦赛丽系列自动机械男表M8600.4.26.8</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/kaxiou.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=62" class="taba">卡西欧(CASIO)手表 指针系列石英女表白盘银链LTP-1183A-7ADF</a>
            </div>
        </div>   
        <div class="tab1">
            <img src="Images/laiyin.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=57" class="taba">莱茵（RHINE）瑞士全自动机械女表 蓝宝石镜面女士手表 镂空陶瓷韩国时尚手表 女 高贵时尚玫瑰金</a>
            </div>
        </div>    
    </ol>
     <ol>
        <div class="tab1">
            <img src="Images/oppoR7plus.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=1055" class="taba">oppo R7 Plus</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/vivo.jpg" class="tab-img"/><br/>
            <div class="tab-div">
            <a href="detail.aspx?id=1057" class="taba">vivo X5</a>
            </div>
        </div>
        <div class="tab1">
            <img src="Images/huaweimate8.jpg" class="tab-img"/>华为Mate8<br/>
            <div class="tab-div">
            <a href="detail.aspx?id=1056" class="taba"></a>
            </div>
        </div>
         <div class="tab1">
            <img src="Images/xiaomi.jpg" class="tab-img"/>华为Mate8<br/>
            <div class="tab-div">
            <a href="detail.aspx?id=1054" class="taba"></a>
            </div>
        </div>    
    </ol>
    </div>

接下来是jquery方式的代码

就看js部分的代码，jquery就比js洁简多了，jquery不需要像js那样获取元素，用上$选择器简单多了。

这个代码就比较规范，实际上上面的js版本在没改之前大体结构和这个差不多，但是因为是刚学改编，所以有些混乱。

注意看到ul的第一个li标签是有特殊的css的，除了样式改变外就是display的属性了，这里采用的点击事件遍历了menu下的li标签，将已经有特殊的tabFocus的class去掉之后，给当前鼠标指向的li添加上这个class，并选择用下标index选择content下的第index个li，并添加上class。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<style type="text/css">
body{
font-size: 13px;
}
ul,li{
margin:0;
padding: 0;
list-style:none;
}
#menu li{
text-align: center;
float: left;
padding:5px;
}
#menu li.tabFocus{
width:50px;
font-weight: bold;
background-color: #f3f2e7;
border: solid 1px #666;
border-bottom: 0;
z-index: 100;
position: relative;
}
#content{
width: 260px;
height: 80px;
padding: 5px;
background-color: #f3f2e7;
clear: left;
border: solid 1px #666;
position: relative;
top: -1px;
}
#content li{ display: none; }
#content li.conFocus{ display: block; }
</style>
<script type="text/javascript">
$(function(){
$("#menu li").each(function( index ){
$(this).click(function(){
$("#menu li.tabFocus").removeClass("tabFocus");
$(this).addClass("tabFocus");
$("#content li:eq(" + index +")").show().siblings().hide();
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家具</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">家居内容</li>
<li>电器城</li>
<li>二手市场</li>
</ul>
</body>