jquery实现选项卡

最新推荐文章于 2020-12-31 10:53:44 发布

笨-大叔

最新推荐文章于 2020-12-31 10:53:44 发布

阅读量557

点赞数

分类专栏： jquery 文章标签： jquery 脚本图层切换选项卡

本文链接：https://blog.csdn.net/u014703834/article/details/38983627

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在前一段学习原生js中学习了选项卡的实现方式，其核心是切换css样式，以实现视觉上的切换。在学习jquery中则有不同的方法，当然其思想也还是那个思想，只是有了封装好的更简单的方法。下面是菜鸟代码,希望各位大神多提建议。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>inde02</title>
		<script type="text/javascript" src="../jquery-2.2.1-min.js"></script>
		<meta name="author" content="yangyu" />
		<!-- Date: 2014-09-01 -->
		<style type="text/css">
			body {padding:0;margin:0;}
			.container{margin:0 auto;width:500px;height:350px;background:#A7C942;}
			.navigation{width:100%;height:50px;}
			.navigation ul{margin:0;padding:0}
			.navigation ul li{width:98px;height:48px;float: left;text-align:center;list-style:none;line-height:50px;
			border:1px solid #EAF2D3;cursor: pointer;}
			.now{background: #FF0000;}
			.contant{width:500px;height:300px;background:#CCCCCC;}
			.contant span{width:500px;height:300px;}
			.hide{display:none;}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
			//获取class名字为navigation下的ul下的li
			var menu=$(".navigation ul li");
			//添加点击事件
			menu.click(function(){
			//点击后，先添加class为now，然后使用siblings()遍历该元素的同胞元素，并且去掉它们中class名字为now的、保证只有一个li的calss为now
			$(this).addClass("now").siblings().removeClass("now");
			//获取li中的index的位置，是一个整数数值，类似数组角标
			var index=menu.index(this);
			//只对div.contant下面的span子集起作用，eq()方法选择指定的元素，用show(),siblings（），和hide(),保证只有span显示
			$('div.contant > span').eq(index).show().siblings().hide();
		});
	});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="navigation">
				<ul>
					<li class="now">A</li>
					<li>B</li>
					<li>C</li>
					<li>D</li>
					<li>E</li>
				</ul>
			</div>
			<div class="contant">
				<span>123</span>
				<span class="hide">456</span>
				<span class="hide">789</span>
				<span class="hide">159</span>
				<span class="hide">357</span>
			</div>
		</div>
	</body>
</html>

源代码免费下载： http://download.csdn.net/detail/u014703834/7851323