jquery实现选项卡

最新推荐文章于 2020-04-20 16:36:35 发布

原创最新推荐文章于 2020-04-20 16:36:35 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery选项卡 #元素的前几个直接子元素

前端专栏收录该内容

4 篇文章

订阅专栏

基本原理：选项是上面有n个可供点击的对象，上面点击不同的对象，下面显示不同的内容，jquery就是根据元素的隐藏和显示来实现选项卡的，将点击对应的元素显示出来，另外的元素全部隐藏起来以实现选项卡的

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小熊商城</title>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<style type="text/css">
.over {
	background: red;
}

.out {
	background: honeydew;
}

.reponsediv {//页面载入时，将其隐藏掉
	display: none;
}
</style>
<script>
	$(document).ready(function() {
		var aBtn = $('#bottom>:lt(4)');//获取ID为footerdiv的前四个直接子元素（也就是父亲的前四个儿子）
		var aDiv = $('#responsediv2 > :lt(4)');
		for (var i = 0; i < aBtn.length; i++) {
			aBtn[i].index = i;//为每个按钮标签设置一个index属性 
			aBtn[i].onclick = function() {
				for (var i = 0; i < aBtn.length; i++) {
					aDiv[i].style.display = 'none';// 将当前的div全部隐藏起来  
				}
				aDiv[this.index].style.display = 'block';//显示当前的选项卡，主要通过index确定选定的选项卡是哪个（也就是点击对应的
//那个显示出来）  
			};
		}

	})
</script>
</head>
<body>
	<center>
		<div style="width: 100%; height: 40px; background: honeydew;">
			<div id="bottom">
				<div style="float: left; width: 25%;"
					onmouseover="this.className='over';"
					onmouseout="this.className='out';">首页</div>
				<div style="float: left; width: 25%;"
					onmouseover="this.className='over';"
					onmouseout="this.className='out';">购物车</div>
				<div style="float: left; width: 25%;"
					onmouseover="this.className='over';"
					onmouseout="this.className='out';">我的购物</div>
				<div style="float: left; width: 25%;"
					onmouseover="this.className='over';"
					onmouseout="this.className='out';">欢迎</div>
			</div>
		</div>
		<div id="responsediv2">
			<div style="diaplay: block">首页内容</div>
			<div class="reponsediv">购物车内容</div>
			<div class="reponsediv">我的购物内容</div>
			<div class="reponsediv">欢迎内容</div>
			<div class="reponsediv">第五个内容</div><!-- 这里是做一个区分，这个div元素永远不会显示，表示上面真的只会选取前四个元素-->
		</div>
	</center>
</body>
</html>