jquery实现三层tab切换

<!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{
	width: 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;
	width: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;
	width: 50px;
}
.current {
	color:red;
}
.content{
	width: 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();
    });
})

posted on 2017-11-22 18:37 赵六阅读(534) 评论(0) 收藏举报