您的位置：首页 > Web前端 > JQuery

JQuery选项卡

2019-06-14 16:49 113 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/tangyue1997/article/details/91985666 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./jquery-1.7.2.min.js"></script>
<style>
*{
padding: 0px;
margin: 0px;

}
ul li{
width: 100px;
height: 40px;
background-color: #ccc;
text-align: center;
line-height: 40px;
float: left;
list-style-type: none;
margin: 3px;
cursor: pointer;
}
#content div{
width: 300px;
height: 300px;
background-color: red;
font-size: 20px;
text-align: center;
line-height: 300px;
margin: 3px;
clear:both;
display: none;
}
.q{
background-color: pink;
}
</style>
<body>
<ul id="title">
<li class="q">明星</li>
<li>军事</li>
<li>娱乐</li>
</ul>
<div id="content">
<div style="display:block;">
我是明星
</div>
<div>
我是军事
</div>
<div>
我是娱乐
</div>
</div>
</body>
<script>
$('ul li').click(function(){
//改变标题
// $(this).addClass('q').siblings().removeClass('q');

//改变内容
// $('#content').children().eq($(this).index()).css('display','block').siblings().css('display','none');

//当然也可以用这种方法 也可以用上边的方法
$(this).addClass('q').siblings().removeClass('q').parent().next().children().eq($(this).index()).show().siblings().hide();
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航