<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/aa.css"/> </head> <body> <div class="container"> <div class="title"> <ul id="mainTitle"> <li class="borderBottom"> caigou </li> <li>shouji</li> </ul> </div> <div class="second" id="secondBox"> <ul class="secBlock" id="secondBoxOne"> <li class="current">1</li> <li>2</li> <li>3</li> </ul> <ul id="secondBoxTwo"> <li class="current">aa</li> <li>bb</li> <li>cc</li> </ul> </div> <div class="content" id="mainItems"> <div class="item " id="contentItem1"> <ul class="secBlock" > <li>111</li> <li>111</li> </ul> <ul> <li>222</li> <li>222</li> </ul> <ul> <li>333</li> <li>333</li> </ul> </div> <div class="item " id="contentItem2"> <ul class="secBlock"> <li>aaaaaaaa</li> <li>aaaaaaaaaa</li> </ul> <ul> <li>bbbbbb</li> <li>bbbbbb</li> </ul> <ul> <li>ccccc</li> <li>ccccc</li> </ul> </div> </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/aa.js"></script> </body> </html>
1、html代码如上：
2、css代码如下：
* {
padding: 0;
margin: 0;
text-decoration: none;
border: none;
outline: none;
list-style: none;
font-family: "微软雅黑";
}
.clearfix:before,
.clearfix:after {
display: block;
content: " ";
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.container{
500px;
height: 500px;
border: 2px solid #0094DC;
margin:0 auto;
}
.title{
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.borderBottom{
border-bottom: 2px solid red;
}
.title li{
float:left;
100px;
cursor: pointer;
text-align: center;
margin-right: 20px;
}
.second {
margin:10px;
}
.second ul {
height: 30px;
display: none;
}
.second .secBlock{
display: block;
}
.second li{
float:left;
text-align: center;
50px;
}
.current {
color:red;
}
.content{
300px;
height: 350px;
overflow: hidden;
}
.content .contentNone{
display: none;
}
.content ul {
display: none;
}
.content .item .secBlock{
display: block;
}
.content .item ul{
display: none;
}
3、javascript代码如下：
$(function() { // 第1层tab $('#mainTitle li').click(function() { var i = $(this).index(); //下标第一种写法 $(this).addClass('borderBottom').siblings().removeClass('borderBottom'); $('#secondBox ul ').eq(i).show().siblings().hide(); $('#mainItems div ').eq(i).show().siblings().hide(); }); // 第二层tab $('#secondBoxOne li').click(function() { var i = $(this).index(); //下标第一种写法 $(this).addClass('current').siblings().removeClass('current'); $('#contentItem1 ul ').eq(i).show().siblings().hide(); }); $('#secondBoxTwo li').click(function() { var i = $(this).index(); //下标第一种写法 $(this).addClass('current').siblings().removeClass('current'); $('#contentItem2 ul ').eq(i).show().siblings().hide(); }); })