JQuery选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

唐小白成长记

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量510

点赞数

分类专栏： JQuery 文章标签：选项卡 JQuery

本文链接：https://blog.csdn.net/tangyue1997/article/details/91985666

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

唐小白成长记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery选项卡

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><script src="./jquery-1.7.2.min.js"></script>&lt...
复制链接

扫一扫