jquery标题切换
实现标题及涉及到的内容切换
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的tab切换</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<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:green;
}
#con li {
display:none;
height:200px;
width:600px;
background:pink;
font-size:30px;
line-height:200px;
text-align:center;
}
#tit span.select {
background:red;
color:#ccc;
}
#con li.show {
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">自我介绍</span>
<span>发展方向</span>
<span>未来规划</span>
</div>
<ul id="con">
<li class="show">我叫XXX,喜欢...</li>
<li>人工智能</li>
<li>1-2两年走基层,3-5年...</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>
效果图:
标题一:
标题二:
标题三: