<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
* {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: #858e85;}
#con li{display: none; height: 200px; width: 600px; background: #e2d8d9;font-size: 60px;line-height: 200px;text-align: center;}
#tit span.select {background: #3c3737; color: #ccc;}
#con li.show {display: block;}
</style>
<script src='js/jquery-1.11.3.min.js'></script>
</head>
<body>
<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>
<script>
$('#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();
});
</script>
</body>
</html>
403
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
