jquery实现选项卡的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.min.js" ></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(){
					//获取当前点击b的li所对应的文本内容
					$(this).parent().siblings().children('li:eq('+$(this).index()+')').show().siblings().hide();
					//给当前点击的li添加样式
					$(this).addClass('active').siblings().removeClass('active');					
				})				
			})
			
			
		</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>
jquery实现选项卡的切换

猜你喜欢
