用jquery做选项卡

最新推荐文章于 2022-05-18 10:58:28 发布

夏至青柠

最新推荐文章于 2022-05-18 10:58:28 发布

阅读量102

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qibulemingzi/article/details/107522522

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

利用jquery写选项卡功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				margin-left: 100px;
				margin-top: 100px;
			}
			ul{
				list-style: none;
				width: 280px;
				height: 32px;
			}
			.blist>li{
				float: left;
				border: 1px solid gainsboro;
				height: 32px;
				width:70px;
				box-sizing: border-box;
				border-left: none;
				text-align: center;
				line-height: 32px;
				cursor: pointer;
			}
			.blist-list li{
				width: 280px;
				height: 200px;
				border: 1px solid gainsboro;
				box-sizing: border-box;
				border-top: none;
				display: none;
			}
			.blist>li a{
				text-decoration: none;
				font-family: "仿宋";
				font-size: 24px;
				color:gray;
			}
			.active{
				background: deepskyblue;
			}
			/* 元素第一个子元素   css3*/
			.blist-list>li:nth-child(1){
				display: block;
			}			
		</style>
		<script type="text/javascript">
			
			$(function(){
				
				$('.wrap>.blist').on('click','li',function(){
					
					$(this).addClass('active').siblings().removeClass('active');
					
					$(this).parent().siblings().children('li:eq('+$(this).index()+')').show().siblings().hide();
					
				});
			});
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul class="blist clearfix">
				<li class="active" style="border-left: 1px solid gainsboro;"><a href="#">电影</a></li>
				<li><a href="#">娱乐</a></li>
				<li><a href="#">生活</a></li>
				<li><a href="#">军事</a></li>
			</ul>
			<ul class="blist-list">
				<li>A-电影</li>
				<li>B-娱乐</li>
				<li>C-生活</li>
				<li>D-军事</li>
			</ul>
		</div>
	</body>
</html>

夏至青柠

关注

1
点赞
踩
0

收藏

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

利用jquery写选项卡功能<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script&.
复制链接

扫一扫