【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果

最新推荐文章于 2024-07-14 11:00:00 发布

逍遥小丸子

最新推荐文章于 2024-07-14 11:00:00 发布

阅读量3.1k

点赞数 6

分类专栏：使用jQuery简化客户端开发文章标签： tab选项卡 jquery选项卡点击切换选项卡

本文链接： https://blog.csdn.net/dnruanjian/article/details/101632094

版权

使用jQuery简化客户端开发专栏收录该内容

16 篇文章 16 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

1、实现效果：

案例描述：当用户单击不同的导航时，与其对应的内容回相应的呈现。

案例要求：使用jquery制作实现tab选项卡单击切换效果。

2、实现思路：

（1）div+css布局，制作选项卡和对应内容卡区域。

（2）给选项卡添加点击事件

（3）一次只能选中一个选项卡（元素），当单击该元素时，给其增加选中的特殊样式，同时控制其他兄弟元素，移除特殊样式。

（4）选项卡和内容卡里的个元素，一一对应，因此可以共用索引。

3、需要掌握的知识点：

（1）基本html知识、基础div+css布局

（2）正确引用jquery文件

（3）jquery选择器的使用：后代选择器

（4）jquery常用事件方法的使用：ready、click、addClass、removeClass、eq、index、siblings

（5）jquery定义函数的方法

4、实现步骤：

第一步：制作网页内容（选项卡和其对应的内容卡）

	<body>
		<div class="container"><!--这个div用来装选项卡导航和其对应的内容-->
			<div class="option-list"><!--这个div用来装选项卡导航，选项卡导航用ul li标签实现-->
				<ul>
					<li>未付款订单</li>
					<li>未发货订单</li>
					<li>未收货订单</li>
					<li>已完成订单</li>
					<li>失效的订单</li>
				</ul>
			</div>
			<div class="card-list"><!--这个div用来装具体的内容，每一个内容用ul li标签实现-->
				<ul>
					<li>这是还没有付款的订单11</li>
					<li>这是还没有发货的订单22</li>
					<li>这是还没有收货的订单33</li>
					<li>这是已完成的订单44</li>
					<li>这是已经失效的订单55</li>
				</ul>
			</div>			
		</div>
	</body>

第二步：添加css样式

		<style>
			body { font: 16px "微软雅黑",sans-serif;}/*设置body统一的文字样式*/
			ul { list-style: none; margin: 0px; padding: 0px;}/*设置整个页面上的ul属性,取消默认的项目符号及外边距和内填充*/
			.container { margin: 20px auto; width: 800px; }/*设置选项卡所在div的样式,左右居中*/
			.option-list { height: 40px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;}
			.option-list li { float: left; height: 39px; padding: 0px 20px; border-right: 1px solid #ccc; border-top: 1px solid #ccc; line-height: 40px; border-bottom: none; background-color: #f5f5f5; cursor:pointer;}  
			.card-list li { padding: 20px; border: 1px solid #ccc; border-top: none; height: 300px; display: none;}
			.card-list .current { display: block;}/*设置第一个内容区,默认显示，*/
			.option-list .current { background-color: white; height: 40px;}/*设置第一个选项卡背景色,以区分其他选项卡,同时修改高度为40px*/
		</style>

第三步：引入jQuery文件

<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->

第四步：写jquery代码

		<script>
			$(document).ready(function(){
				//使用后代选择器.option-list li，选中导航元素，并给他们添加click方法
				$(".option-list li").click(function(){
					//使用this关键字选中当前单击的对象，增加样式current，并使用siblings方法找到该对象的所有同级元素，移除样式current
					$(this).addClass("current").siblings("li").removeClass("current");	
					//使用后代选择器.card-list li，选中内容区元素，全部移除样式curr，再使用eq方法找到导航区li对象的索引数字，同时作为内容区的索引，增加样式current
					$(".card-list li").removeClass("current").eq($(this).index()).addClass("current");
				})
			})
		</script>

代码分析：

siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。
index() 方法返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。
导航区的li元素和内容区的li元素，要一一对应，因此每一组的index应该是一样的。

思考：利用本案例，制作复杂Tab选项案例。

本案例完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>王迪-选项卡案例</title>
		<style>
			body { font: 16px "微软雅黑",sans-serif;}/*设置body统一的文字样式*/
			ul { list-style: none; margin: 0px; padding: 0px;}/*设置整个页面上的ul属性,取消默认的项目符号及外边距和内填充*/
			.container { margin: 20px auto; width: 800px; }/*设置选项卡所在div的样式,左右居中*/
			.option-list { height: 40px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;}
			.option-list li { float: left; height: 39px; padding: 0px 20px; border-right: 1px solid #ccc; border-top: 1px solid #ccc; line-height: 40px; border-bottom: none; background-color: #f5f5f5; cursor:pointer;}  
			.card-list li { padding: 20px; border: 1px solid #ccc; border-top: none; height: 300px; display: none;}
			.card-list .current { display: block;}/*设置第一个内容区,默认显示，*/
			.option-list .current { background-color: white; height: 40px;}/*设置第一个选项卡背景色,以区分其他选项卡,同时修改高度为40px*/
		</style>
		<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->
		<script>
			$(document).ready(function(){
				//使用后代选择器.option-list li，选中导航元素，并给他们添加click方法
				$(".option-list li").click(function(){
					//使用this关键字选中当前单击的对象，增加样式current，并使用siblings方法找到该对象的所有同级元素，移除样式current
					$(this).addClass("current").siblings("li").removeClass("current");	
					//使用后代选择器.card-list li，选中内容区元素，全部移除样式curr，再使用eq方法找到导航区li对象的索引数字，同时作为内容区的索引，增加样式current
					$(".card-list li").removeClass("current").eq($(this).index()).addClass("current");
				})
			})
		</script>
	</head>
	<body>
		<div class="container"><!--这个div用来装选项卡导航和其对应的内容-->
			<div class="option-list"><!--这个div用来装选项卡导航，选项卡导航用ul li标签实现-->
				<ul>
					<li class="current">未付款订单</li>
					<li>未发货订单</li>
					<li>未收货订单</li>
					<li>已完成订单</li>
					<li>失效的订单</li>
				</ul>
			</div>
			<div class="card-list"><!--这个div用来装具体的内容，每一个内容用ul li标签实现-->
				<ul>
					<li class="current">这是还没有付款的订单11</li>
					<li>这是还没有发货的订单22</li>
					<li>这是还没有收货的订单33</li>
					<li>这是已完成的订单44</li>
					<li>这是已经失效的订单55</li>
				</ul>
			</div>			
		</div>
	</body>
</html>

==========这里是结束分割线=============

逍遥小丸子

关注关注

6
点赞
踩
44

收藏

觉得还不错? 一键收藏
打赏
1
评论
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果

1、实现效果：案例描述：当用户单击不同的导航时，与其对应的内容回相应的呈现。案例要求：使用jquery制作实现tab选项卡单击切换效果。2、实现思路：（1）div+css布局，制作导航和对应内容区域。（2）给导航添加点击事件（3）一次只能选中一个导航条（元素），当单击该元素时，给其增加选中的特殊样式，同时控制其他兄弟元素，移除特殊样式。（4）导航条和内容区的两...
复制链接

扫一扫