jquery常见特效之TAB切换栏

最新推荐文章于 2022-10-02 14:55:22 发布

十一号路口。

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量243

点赞数

分类专栏： jquery 文章标签： jquey特效 TAB

本文链接：https://blog.csdn.net/lmhlmh_/article/details/80532997

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			margin: 200px auto;
			width: 310px;
		}
		ul,ol{list-style-type: none;}
		ul li{
			float: left;
			width: 100px;
			text-align: center;
			height: 50px;
			line-height: 50px;
			cursor: pointer;
		}
		.ulShow{
			background: #b0f7c3;
			border: 1px solid blue;
			border-bottom: none;
		}
		.ulHide{
			background: white;
			border-bottom: 1px solid blue;
		}
		ol{
			display: none;
			height: 250px;
			width: 300px;
			background: #b0f7c3;
		}
		.olShow{
			display: block;
			border: 1px solid blue;
			border-top: none;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul class="nav">
			<li class="ulShow">夏季凉鞋</li>
			<li class="ulHide">冬季羽绒</li>
			<li class="ulHide">四季T恤>
		</ul>
		<ol class="olShow">
			<li>夏季凉鞋</li>
			<li>夏季凉鞋</li>
			<li>夏季凉鞋</li>
		</ol>
		<ol>
			<li>冬季羽绒</li>
			<li>冬季羽绒</li>
			<li>冬季羽绒</li>
		</ol>
		<ol>
			<li>四季T恤</li>
			<li>四季T恤</li>
			<li>四季T恤</li>
		</ol>		
	</div>

 	<script type="text/javascript">
 		 $("#box>ul>li").click(function() {
 		 	var index = $(this).index();
 		 	$("#box>ul>li").attr("class","ulHide");
 		 	$(this).attr("class","ulShow");
 		 	$("#box>ol").removeClass();
 		 	$("#box>ol").eq(index).addClass('olShow')
 		 });
 	</script>
</body>
</html>

效果展示：

十一号路口。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery常见特效之TAB切换栏

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&amp
复制链接

扫一扫