jQuery-tab栏切换

最新推荐文章于 2023-04-11 08:46:50 发布

小猴子的技术笔记

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量796

点赞数 1

分类专栏： jQuery教程文章标签： jQuery tab栏切换

本文链接：https://blog.csdn.net/MonkeyBrothers/article/details/79302583

版权

jQuery教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.因为使用JavaScript实现tab栏切换比较麻烦，所以就介绍一种简单的jQuery的方法来实现tab切换功能。首先我们需要把页面搭建好，html5实现的界面代码如下：

样式：

<style type="text/css">
		* {margin: 0； padding: 0;}
		ul li {
			list-style: none;
		}
		.wrapper {
			height: 2000px;
			background-color: pink;
		}
		.tab {
			height: 50px;
		}
		.tab li {
			margin-right: 20px;
			float: left;
			line-height: 50px;
			cursor: pointer;
		}
		.products {
			position: relative;
		}
		.main {
			position: absolute;
		}
		.products .main.selected {
			/*解决子绝父相浮动之后，让第一张图片显示在最上面的问题。*/
			z-index: 1;
		}
		.tab .active {
			background-color: blue;
		}
	</style>

代码：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery-Tab栏切换</title>
	
	<script src="jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function () {
			// 注册鼠标经过事件
			$(".s").mouseenter(function () {
				// 为当前鼠标所在的位置添加样式，并取消其兄弟节点样式
				$(this).addClass("active").siblings().removeClass("active");
				// 定义一个值存放索引，为图片展示做铺垫
				var index = $(this).index();
				// 为当前鼠标所在的位置添加样式，并取消其兄弟节点样式
				$(".main").eq(index).addClass("selected").siblings().removeClass("selected");
			});
		});

	</script>
</head>
<body>
	<div class="wrapper">
	<!-- 导航部分 -->
	<ul class="tab">
		<li class="s active">第一组图片</li>
		<li class="s">第二组图片</li>
	</ul>
	<!-- 商品展示部分 -->
	<div class="products">
		<div class="main selected">
			<a href="#">
				<img src="images/a.jpg">
				<img src="images/b.jpg">
			</a>
		</div>
		<div class="main">
			<a href="#">
				<img src="images/c.jpg">
				<img src="images/d.jpg">
			</a>
		</div>
		
	</div>
	</div>
</body>
</html>

2.效果图，如图所示：

3.我们先了解下以下jQuery方法：

        1.mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。
        2.addClass:addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
        3.sibling()：获得匹配集合中每个元素的同胞(兄弟节点) ，通过选择器进行筛选是可选的。

4.removeClass(): 方法从被选元素移除一个或多个类。

4.我们想要实现的就是鼠标放在“第一组图片”上，文字背景变颜色，图片显示。当放在“第二组图片”上的时候，“第一组图片”的背景变换成平常的样式，“第二组图片”背景颜色变换，同时显示第二组图片。简单分析之后，我们来看代码：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery-Tab栏切换</title>
	<style type="text/css">
		* {margin: 0； padding: 0;}
		ul li {
			list-style: none;
		}
		.wrapper {
			height: 2000px;
			background-color: pink;
		}
		.tab {
			height: 50px;
		}
		.tab li {
			margin-right: 20px;
			float: left;
			line-height: 50px;
			cursor: pointer;
		}
		.products {
			position: relative;
		}
		.main {
			position: absolute;
		}
		.products .main.selected {
			/*解决子绝父相浮动之后，让第一张图片显示在最上面的问题。*/
			z-index: 1;
		}
		.tab .active {
			background-color: blue;
		}
	</style>
	<script src="jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function () {
			// 注册鼠标经过事件
			$(".s").mouseenter(function () {
				// 为当前鼠标所在的位置添加样式，并取消其兄弟节点样式
				$(this).addClass("active").siblings().removeClass("active");
				// 定义一个值存放索引，为图片展示做铺垫
				var index = $(this).index();
				// 为当前鼠标所在的位置添加样式，并取消其兄弟节点样式
				$(".main").eq(index).addClass("selected").siblings().removeClass("selected");
			});
		});

	</script>
</head>
<body>
	<div class="wrapper">
	<!-- 导航部分 -->
	<ul class="tab">
		<li class="s active">第一组图片</li>
		<li class="s">第二组图片</li>
	</ul>
	<!-- 商品展示部分 -->
	<div class="products">
		<div class="main selected">
			<a href="#">
				<img src="images/a.jpg">
				<img src="images/b.jpg">
			</a>
		</div>
		<div class="main">
			<a href="#">
				<img src="images/c.jpg">
				<img src="images/d.jpg">
			</a>
		</div>
		
	</div>
	</div>
</body>
</html>

5.把图片换成自己的图片，然后执行上面代码就能实现tab栏切换功能，如果有问题可是联系我，大家共同探讨。

小猴子的技术笔记

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery-tab栏切换

1.因为使用JavaScript实现tab栏切换比较麻烦，所以就介绍一种简单的jQuery的方法来实现tab切换功能。首先我们需要把页面搭建好，html5实现的界面代码如下：样式：&lt;style type="text/css"&gt; * {margin: 0； padding: 0;} ul li { list-style: none; } .wrapper { ...
复制链接

扫一扫