jQuery tab切换代码

html

<div id="wrap">
    <div id="tit">
        <span class="select">标题1</span>
        <span>标题2</span>
        <span>标题3</span>
    </div>
    <ul id="con">
        <li class="show">内容111</li>
        <li>内容222</li>
        <li>内容333</li>
    </ul>
</div>

  * {
	margin:0;
	padding:0;
	list-style:none;
}
#wrap {
	width:600px;
	margin:100px auto 0;
	overflow:hidden;
}
#tit {
	height:30px;
	width:600px;
}
#tit span {
	float:left;
	height:30px;
	line-height:30px;
	width:200px;
	font-size:20px;
	text-align:center;
	color:#ccc;
	background:green;
}
#con li {
	display:none;
	height:200px;
	width:600px;
	background:pink;
	font-size:100px;
	line-height:200px;
	text-align:center;
}
#tit span.select {
	background:red;
	color:#ccc;
}
#con li.show {
	display:block;
}

$('#tit span').click(function() {
    var i = $(this).index(); //下标第一种写法
    //var i = $('tit').index(this);//下标第二种写法
    $(this).addClass('select').siblings().removeClass('select');
    $('#con li').eq(i).show().siblings().hide();
});

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8297.html