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();
}