当前位置： 移动技术网 > IT编程>网页制作>HTML > jQuery实现选项卡

jQuery实现选项卡

2020年07月24日  | 移动技术网IT编程  | 我要评论 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin-left: 100px;
				margin-top: 100px;
			}
			ul{
				list-style: none;
				width: 280px;
				height: 32px;
			}
			.lie>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;
			}
			.lie-list li{
				width: 280px;
				height: 200px;
				border: 1px solid gainsboro;
				box-sizing: border-box;
				border-top: none;
				display: none;
			}
			.lie>li a{
				text-decoration: none;
				font-family: "楷体";
				font-size: 24px;
				color:gray;
			}
			.active{
				background: deepskyblue;
			}
			/* 元素第一个子元素   css3*/
			.lie-list>li:nth-child(1){
				display: block;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".lie").on("click","li",function(){
					var index = $(this).index()
					$(this).parent().siblings().children("li:eq(" + $(this).index() + ")").show().siblings().hide();
					$(this).addClass("active").siblings().removeClass("active");
				});
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul class="lie">
				<li class="active">电影</li>
				<li>娱乐</li>
				<li>生活</li>
				<li>军事</li>
			</ul>
			<ul class="lie-list">
				<li>电影......</li>
				<li>娱乐......</li>
				<li>生活......</li>
				<li>军事......</li>
			</ul>
		</div>
	</body>
</html>

本文地址：https://blog.csdn.net/lipeiwen1998/article/details/107526194

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网