jquery多个tab切换

时间：7年前阅读：6188

直接上代码演示，最后效果点下面的运行代码：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			.tab{    
				width: 480px;    
				height: 400px;    
				border: 5px solid blue;    
				margin: 50px auto;    
				position: relative;    
				float: left;    
			}    
			.tab ul li{    
				list-style: none;    
				float: left;    
				width: 160px;    
				height: 50px;    
				line-height: 50px;    
				font-size: 30px;    
				text-align: center;    
			}    
			.tab .con{    
				width: 460px;    
				height: 320px;    
				position: absolute;    
				left: 10px;    
				top: 60px;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$("li").mouseenter(function(){    
					t= $(this).index();    
					$(this).parents('.tab').children(".con").eq(t).show().siblings(".con").hide();    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<div class="tab">    
		<ul>    
			<li style="background: olive;">新闻</li>    
			<li style="background: darkgreen;">图片</li>    
			<li style="background: darkviolet;">军事</li>    
		</ul>    
		<div class="con" style="background: olive; z-index: 2;"></div>    
		<div class="con" style="background: darkgreen;"></div>    
		<div class="con" style="background: darkviolet;"></div>    
		</div>    
		<div class="tab">    
		<ul>    
			<li style="background: olive;">新闻</li>    
			<li style="background: darkgreen;">图片</li>    
			<li style="background: darkviolet;">军事</li>    
		</ul>    
		<div class="con" style="background: olive; z-index: 2;"></div>    
		<div class="con" style="background: darkgreen;"></div>    
		<div class="con" style="background: darkviolet;"></div>    
		</div>    
		<div class="tab">    
		<ul>    
			<li style="background: olive;">新闻</li>    
			<li style="background: darkgreen;">图片</li>    
			<li style="background: darkviolet;">军事</li>    
		</ul>    
		<div class="con" style="background: olive; z-index: 2;"></div>    
		<div class="con" style="background: darkgreen;"></div>    
		<div class="con" style="background: darkviolet;"></div>    
		</div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery多个tab切换

网友评论