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():获得匹配集合中 每个元素的同胞(兄弟节点) ,通过选择器进行筛选是可选的。
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栏切换功能,如果有问题可是联系我,大家共同探讨。