JS | 如何实现选项卡切换触发添加和删除类名

今天在做项目的过程中,遇到一个需求。鼠标移动到tab选项卡上,要实现当前选项卡所对应的内容显示隐藏。

如图所示:


html页面如下:

<div class="map-tab clearfix">
	<div class="tab-btn">
		<ul class="ul clearfix" id="tabBtn">
			<li class="item item1 text">一轴</li>
			<li class="item item2 text">两带</li>
			<li class="item item3 text">五板块</li>
		</ul>
	</div>
	<div class="tab-content" id="tabContent">
		<div class="text text-info text1 oneAxis">一轴:<span class="text">科技创新引领轴</span></div>
		<div class="text text-info text2 twoBelts">两带:<span class="text">沣河滨水生态景观带、自由贸易经济发展带</span></div>
		<div class="text text-info text3 fivePlate">五板块:<span class="text">大西安新中心板块、昆明池生态旅游板块、周镐京和秦阿旁宫历史文化板块、三桥现代商贸板块、现代产业与先进制造业板块。</span></div>
	</div>
</div>

<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>

JS如何实现呢?

$('#tabBtn li').mousemove(function() {
	$(this).addClass('active').siblings().removeClass('active'); //给当前元素添加类名:active,并且删除其兄弟元素的类名:active
	var index = $(this).index();  //获得当前元素的下标(序号),使得切换的时候一一对应<br> 
	//  当前元素的 父元素的 兄弟元素的 子元素: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();
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值