使用JQuery实现选项卡切换:触发添加和删除类名!
html代码
<div>
<div class="ig">
<img src="images/dl1.jpg" alt="">
<div class="video-btn">
<p>Watch video</p>
<a href=""><i></i></a></div>
</div>
</div>
<ul>
<li>
<a href=""><i></i>5 year quality guarantee</a>
</li>
<li class="into">
<a href=""><i></i>Full redund policy for bad items </a>
</li>
<li>
<a href=""><i></i>LEAD-TIME GURANTEE</a>
</li>
</ul>
<div id="content">
<div class="mod">
<ul>
<li><a href="#">内容1</a> </li>
<li><a href="#">内容2</a> </li>
<li><a href="#">内容3</a> </li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">内容1</a> </li>
<li><a href="#">内容2</a> </li>
<li><a href="#">内容3</a> </li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">内容1</a> </li>
<li><a href="#">内容2</a> </li>
<li><a href="#">内容3</a> </li>
</ul>
</div>
</div>
JQ代码:鼠标移动触发
$('ul li').mousemove(function() {
$(this).addClass('into').siblings().removeClass('into'); //给当前元素添加类名:into,并且删除其兄弟元素的类名:into
var index = $(this).index(); //获得当前元素的下标(序号),使得切换的时候一一对应
// 当前元素的 父元素的 兄弟元素的 子元素:ig的子元素:img 更改其属性值: src
$(this).parent().siblings().children('.ig').children('img').attr('src','http://vue.wuliwu.top/upload/20200327105102551.jpg');
// 获取与之对应的li序号,显示元素,隐藏兄弟元素
$("#content .mod").eq($("ul li").index(this)).show().siblings("#content .mod").hide();
})
仅供参考!
解释的有点生硬,直接上图:
当鼠标移动的时候右侧选项卡背景变为白色,左侧图片更改