Tab选项卡切换

最新推荐文章于 2023-02-11 11:28:40 发布

七七看起来萌萌哒

最新推荐文章于 2023-02-11 11:28:40 发布

阅读量423

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/az_77/article/details/51816981

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

内容来自慕课网：http://www.imooc.com/learn/176

Tab选项卡四种：滑动切换、点击切换、延迟切换、自动切换。

其中滑动切换和点击切换的区别不过就是onclick 和onmouseover()

核心内容是设置index

滑动切换：

<!DOCTYPE html>
<html>
<head>
	<title>Tab切换</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id = "notice" class = "notice">
		<div class = "notice-tit" id = "notice-tit">
			<ul>
				<li><a href="#">公告</a></li>
				<li><a href="#">规则</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="#">安全</a></li>
				<li class = "select"><a href="#">公益</a></li>
			</ul>
		</div>
		<div id = "notice-con" class = "notice-con">
			<div class = "mod" style = "display:none;">
				<ul>
					<li><a href="#">雕栏玉砌应犹在</a></li>
					<li><a href="#">雕栏玉砌应犹在</a></li>
					<li><a href="#">雕栏玉砌应犹在</a></li>
					<li><a href="#">雕栏玉砌应犹在</a></li>
				</ul>
			</div>
			<div class = "mod" style = "display:none;">
				<ul>
					<li><a href="#">春花秋月何时了</a></li>
					<li><a href="#">春花秋月何时了</a></li>
					<li><a href="#">春花秋月何时了</a></li>
					<li><a href="#">春花秋月何时了</a></li>
				</ul>
			</div>
			<div class = "mod" style = "display:none;">
				<ul>
					<li><a href="#">小楼昨夜又东风</a></li>
					<li><a href="#">小楼昨夜又东风</a></li>
					<li><a href="#">小楼昨夜又东风</a></li>
					<li><a href="#">小楼昨夜又东风</a></li>
				</ul>
			</div>
			<div class = "mod" style = "display:none;">
				<ul>
					<li><a href="#">故国不堪回首明月中</a></li>
					<li><a href="#">故国不堪回首明月中</a></li>
					<li><a href="#">故国不堪回首明月中</a></li>
					<li><a href="#">故国不堪回首明月中</a></li>
				</ul>
			</div>
			<div class = "mod" style = "display:none;">
				<ul>
					<li><a href="#">恰似一江春水向东流</a></li>
					<li><a href="#">恰似一江春水向东流</a></li>
					<li><a href="#">恰似一江春水向东流</a></li>
					<li><a href="#">恰似一江春水向东流</a></li>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		window.onload = function(){
			var ul = document.getElementById("notice-tit");
			var lis = ul.getElementsByTagName("li");
			var conul = document.getElementById("notice-con");
			var cons = conul.getElementsByTagName("div");
			for(var i = 0; i <lis.length; i++){
				lis[i].index = i;
				lis[i].onmouseover = function(){
					
					for(var m = 0; m < lis.length; m++){
						lis[m].className = " ";
					}
					this.className = "select";

					for(var n = 0; n < cons.length; n++){
						cons[n].style.display = 'none';
					}
					//alert(this.index);
					cons[this.index].style.display = 'block';
				}
			}
		}
	</script>
</body>
</html>

小练习：

源码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin:0;;
			padding: 0;
			font-size:13px;
			list-style: none;
		}
		.menu{
			width:210px;
			margin:50px auto;
			border:1px solid #ccc;
		}
		.menu p{
			height: 25px;
			line-height: 25px;
			font-weight: bold;
			background: #eee;
			border-bottom:1px solid #ccc;
			cursor:pointer;
			padding-left: 5px;
		}
		.menu div ul{
			display: none;
		}
		.menu li{
			height:24px;
			line-height: 24px;
			padding-left: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var menu = document.getElementById("menu");
			var p = menu.getElementsByTagName("p");
			var ul = menu.getElementsByTagName("ul");
			for(var i = 0 ; i < p.length; i++){
				p[i].index = i;
				p[i].onclick = function(){
					
					if(ul[this.index].style.display == "block"){
						ul[this.index].style.display = "none";
					}
					else{
						for(var j = 0; j < ul.length; j++){
							ul[j].style.display = 'none';
						}
					    ul[this.index].style.display = "block";
				    }
	
				}

			}
		}
	</script>
</head>
<body>
	<div class = "menu" id = "menu">
		<div>
			<p>Web前端</p>
			<ul style = "display:block">
				<li>JavaScript</li>
				<li>DIV+CSS</li>
				<li>jQuery</li>
			</ul>
		</div>
		<div>
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>
		</div>
		<div>
			<p>前端框架</p>
			<ul>
				<li>Exitjs</li>
				<li>Esspress</li>
				<li>YUI</li>
			</ul>
		</div>
	</div>
</body>
</html>

延迟切换：

延迟切换其实就是利用了setTimeout()来实现延迟效果，而setTimeout和setInterval同样作为定时器函数，其区别在于：

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

除此之外，setTimeout和setInterval都是windows的函数，因此在这两个函数中this指向的是windows。

源码：

window.onload = function(){
			var ul = document.getElementById("notice-tit");
			var lis = ul.getElementsByTagName("li");
			var conul = document.getElementById("notice-con");
			var cons = conul.getElementsByTagName("div");

			var timer = null;
			for(var i = 0; i < lis.length; i++){
				lis[i].index = i;
				lis[i].onmouseover = function(){
					if(timer){
						clearTimeout(timer);
						timer = null;
					}

					for(var j = 0; j < lis.length; j++){
						lis[j].className = " ";
						cons[j].style.display = "none";
					}
                   <span style="white-space:pre">			</span>var that = this;
					timer = setTimeout(function(){
						that.className = "select";
						cons[that.index].style.display = "block";
					},500)
				}
			}
		}

七七看起来萌萌哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab选项卡切换

内容来自慕课网：http://www.imooc.com/learn/176Tab选项卡四种：滑动切换、点击切换、延迟切换、自动切换。其中滑动切换和点击切换的区别不过就是onclick 和onmouseover()核心内容是设置index滑动切换： Tab切换公告规则论坛安全公益
复制链接

扫一扫