jQuery|Tab选项栏特效制作(含测试源码)

本博文源于jquery基础，旨在讨论如何实现Tab选项栏特效制作.

实验效果

测试用图

右击图片另存为"数字.jpg",0,1,2

实验步骤

创建文件结构

如下图，

css放css文件，images放图片，jslib放jQuery静态库，index就是最终效果。

书写html代码

<div class="tab" id="myTab1">
	<div class="hd">
		<span class="cur">tab0</span>
		<span>tab1</span>
		<span class="last">tab2</span>
	</div>
	<div class="bd">
		<div class="column cur">
			<img src="images/0.jpg"/>
		</div>
		<div class="column">
			<img src="images/1.jpg"/>
		</div>
		<div class="column">
			<img src="images/2.jpg"/>
		</div>
	</div>
</div>
<div class="tab" id="myTab2">
	<div class="hd">
		<span class="cur">tab0</span>
		<span>tab1</span>
		<span class="last">tab2</span>
	</div>
	<div class="bd">
		<div class="column cur">
			<img src="images/0.jpg"/>
		</div>
		<div class="column">
			<img src="images/1.jpg"/>
		</div>
		<div class="column">
			<img src="images/2.jpg"/>
		</div>
	</div>
</div>

写完html代码，最终效果如下

书写css代码

* {
	margin: 0;
	padding: 0;
}
.tab {
	width: 360px;
	height: 280px;
	border: 1px solid #ccc;
	margin: 100px auto;
}
.tab .hd {
	height: 30px;
	width: 360px;
}
.tab .hd span {
	float: left;
	width: 119px;
	height: 29px;
	text-align: center;
	line-height: 30px;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.tab .hd span.last {
	width: 120px;
	border-right: none;
}
.tab .hd span.cur {
	border-bottom: 1px solid red;
}
.bd {
	padding-top: 10px;
}
.bd .column {
	display: none;
}
.bd .column.cur {
	display: block;
}
.bd .column img{
	width: 360px;
} 

效果如下

书写jquery代码

注意路径引用

<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
	tablt("myTab1");
	tablt("myTab2");
	function tablt(id) {
		var $tab = $("#" + id);
		var $hd_spans = $tab.find(".hd span");
		var $bd_column = $tab.find(".bd .column");
		
		var idx = 0;
		$hd_spans.mouseover(function(){
			idx = $(this).index();
			$hd_spans.eq(idx).addClass("cur").siblings().removeClass("cur");
			$bd_column.eq(idx).addClass("cur").siblings().removeClass("cur");
		});
	}
</script>

最终效果如下，收获喜悦：

总结

列出所有文档页面标签，只让其中一个文档页面显示，当用户鼠标滑过标签的时候，改变信号量为用户鼠标滑过的这个信号量的序号，然后设置和序号量相同序号的文档页面显示，其他文档页面隐藏。