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

本博文源于js基础,主要探讨如何实现tab栏的制作。

题目再现

Tab栏特效也叫“选项卡特效”,是网页上常见的效果。它由一组标签和内容两部分组成,当触碰任何一个标签的时候,此时就会显示对应的内容盒子。

测试效果

在这里插入图片描述
在这里插入图片描述

实现原理

选项栏特效想必一定要用到h5+c3+js。

h5怎么写

首先div来个盒子,导航栏一个盒子。盒子里面三个专栏用span按钮来装进去,导航栏下面是内容,一共有三部分内容,用三个盒子div来装,每个div里面像导航栏一样套li。每个li和span有链接a样式,后期可制作鼠标移上去特效。

	<body>
		<div class="tab">
			<div class="hd" id="tab_hd">
				<span class="current">
					<a href="">新闻</a>
				</span>
				<span class="">
					<a href="">图片</a>
				</span>
				<span class="last">
					<a href="">军事</a>
				</span>
				
			</div>
			<div class="bd" id="tab_bd">
				<div class="current">
					<ul>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
					</ul>
				</div>
				<div>
					<ul>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
					</ul>					
				</div>
				<div>
					<ul>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
					</ul>					
				</div>
			</div>
		</div>
	</body>

c3怎么写

浮动最重要,上面的导航栏目左浮动,导航栏下面的内容没有被点击的情况下display设置为none,要显示的div变成块级元素。这三个盒子模型是大头,其他边角比如:a的样式,导航栏的字体,当行栏目的padding,内容的list-style设置。鼠标移动上去的样式等,

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.tab {
				margin: 100px auto;
				width: 310px;
				border-top:2px solid #206f96;
			}
			.tab .hd{
				overflow: hidden;
			}
			/*设置选项栏三个导航*/
			.tab .hd span {
				float: left;
				width: 102px;
				line-height: 29px;
				border-left: 1px solid #CFCFCF;
				border-bottom: 1px solid #CFCFCF;
				background-color: #efefef;
				text-align: center;
				font-size: 14px;
				font-family: "SimSun";
			}
			.tab .hd span:last-child {
				border-right: 1px solid #cfcfcf;
			}
			/*设置导航栏被当前点击后的感觉*/
			.tab .hd span.current {
				border-bottom-color: white;
				background-color: white;
				font-weight: bold;
			}
			/*设置导航栏链接的下划线删去*/
			.tab .hd span a {
				color: #252525;
				text-decoration: none;
			}
			/*设置导航栏鼠标移上去的感觉*/
			.tab .hd span a:hover {
				color: #a00;
				text-decoration: underline;
			}
			/*每块导航栏的内容--盒子模型*/
			.tab .bd {
				padding-top: 15px;
				padding-left: 8px;
			}
			
			.tab .bd ul {
				list-style: none;
			}
			.tab .bd ul li {
				font:14px/27px "SimSun";
			}
			.tab .bd ul li a {
				text-decoration: none;
				color:#252525;
			}
			/* 导航里的内容设置鼠标移上去的样式 */
			.tab .bd ul li a:hover {
				text-decoration: underline;
				color:#a00;
			}
			.tab .bd div {
				display: none;
			}
			.tab .bd div.current {
				display: block;
			}
			
		</style>

js怎么写

给每个栏目里的导航栏设置监听器,这个内容是批量添加监听的,可以参考这篇博文
JavaScript|批量添加监听(盒子变色和序号按钮问题)
有异曲同工之妙。然后根据监听到的点击事件,让div的classname作相应改变,最后达到单击效果

	<script type="text/javascript">
		var hdSpans = document.getElementById("tab_hd").getElementsByTagName("span");
		var bdDivs = document.getElementById("tab_bd").getElementsByTagName("div");
		
		//批量监听
		for(var i=0;i < hdSpans.length;i++) {
			(function(i) {
				hdSpans[i].onmouseover = function() {
					for(var j=0;j < bdDivs.length ; j++) {
						bdDivs[j].className = "";
						hdSpans[j].className = "";
					}
					bdDivs[i].className = "current";
					this.className = "current";
				}
			})(i); 
		};
	</script>

完整源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.tab {
				margin: 100px auto;
				width: 310px;
				border-top:2px solid #206f96;
			}
			.tab .hd{
				overflow: hidden;
			}
			/*设置选项栏三个导航*/
			.tab .hd span {
				float: left;
				width: 102px;
				line-height: 29px;
				border-left: 1px solid #CFCFCF;
				border-bottom: 1px solid #CFCFCF;
				background-color: #efefef;
				text-align: center;
				font-size: 14px;
				font-family: "SimSun";
			}
			.tab .hd span:last-child {
				border-right: 1px solid #cfcfcf;
			}
			/*设置导航栏被当前点击后的感觉*/
			.tab .hd span.current {
				border-bottom-color: white;
				background-color: white;
				font-weight: bold;
			}
			/*设置导航栏链接的下划线删去*/
			.tab .hd span a {
				color: #252525;
				text-decoration: none;
			}
			/*设置导航栏鼠标移上去的感觉*/
			.tab .hd span a:hover {
				color: #a00;
				text-decoration: underline;
			}
			/*每块导航栏的内容--盒子模型*/
			.tab .bd {
				padding-top: 15px;
				padding-left: 8px;
			}
			
			.tab .bd ul {
				list-style: none;
			}
			.tab .bd ul li {
				font:14px/27px "SimSun";
			}
			.tab .bd ul li a {
				text-decoration: none;
				color:#252525;
			}
			/* 导航里的内容设置鼠标移上去的样式 */
			.tab .bd ul li a:hover {
				text-decoration: underline;
				color:#a00;
			}
			.tab .bd div {
				display: none;
			}
			.tab .bd div.current {
				display: block;
			}
			
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="hd" id="tab_hd">
				<span class="current">
					<a href="">新闻</a>
				</span>
				<span class="">
					<a href="">图片</a>
				</span>
				<span class="last">
					<a href="">军事</a>
				</span>
				
			</div>
			<div class="bd" id="tab_bd">
				<div class="current">
					<ul>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
						<li><a href="">新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
					</ul>
				</div>
				<div>
					<ul>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
						<li><a href="">图片图片图片图片图片图片图片图片图片图片</a></li>
					</ul>					
				</div>
				<div>
					<ul>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
						<li><a href="">军事军事军事军事军事军事军事军事军事军事</a></li>
					</ul>					
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var hdSpans = document.getElementById("tab_hd").getElementsByTagName("span");
		var bdDivs = document.getElementById("tab_bd").getElementsByTagName("div");
		
		//批量监听
		for(var i=0;i < hdSpans.length;i++) {
			(function(i) {
				hdSpans[i].onmouseover = function() {
					for(var j=0;j < bdDivs.length ; j++) {
						bdDivs[j].className = "";
						hdSpans[j].className = "";
					}
					bdDivs[i].className = "current";
					this.className = "current";
				}
			})(i); 
		};
	</script>
</html>

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读