HTML CSS +js 实现tab选项卡，自动轮换

最新推荐文章于 2021-05-31 08:24:14 发布

jiaweimin123

最新推荐文章于 2021-05-31 08:24:14 发布

阅读量1k

点赞数

分类专栏： css html jquery javascript 文章标签： javascript tab选项卡自动切换

本文链接：https://blog.csdn.net/jiaweimin123/article/details/78165093

版权

javascript 同时被 3 个专栏收录

41 篇文章 2 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab-选项切换</title>
	<style>
		*{  margin: 0;
			padding: 0;
		}
		.container{
			width: 500px;
			height: 180px;
			margin: 20px auto;
			border: 1px solid red;
		}
		.header{
			width: 500px;
			height: 40px;
			/*border: 1px solid red;*/
			box-sizing: border-box;
			background-color: #fff;
		}
		.header ul{
			display: flex;
			justify-content: space-between;
		}
		.header ul li{
			padding: 0;
			list-style: none;
			width: 100px;
			height: 39px;
			background-color: gray;
			text-align: center;
		}
		.header ul li:hover{
			border-bottom: 1px solid white;
		}
		.header ul li a{
			text-decoration:none;
			color:black;
			line-height: 40px;
			font-weight: bold;
		}
		.content{
			width: 500px;
			height: 140px;
			overflow: hidden;
		}
		.con{
			width: 500px;
			height: 140px;
		}
		.con ul li{
			list-style: none;
		}
		.con ul li p{
			font-size: 35px;
			float: left;
			padding: 10px 30px 10px;
		}
		.header ul li.select{
			background-color: white;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="header" id="header">
			<ul>
				<li class="select"><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 class="content" id="content" style="display: block">
			<div class="con">
				<ul>
					<li><p>离离原上草</p></li>
					<li><p>一岁一枯荣</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>春风吹又生</p></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><p>小时不识月</p></li>
					<li><p>呼作白玉盘</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>春风吹又生</p></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><p>青青子衿</p></li>
					<li><p>悠悠我心</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>春风吹又生</p></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><p>山不在高</p></li>
					<li><p>有仙则灵</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>春风吹又生</p></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><p>野火烧不尽</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>野火烧不尽</p></li>
					<li><p>野火烧不尽</p></li>
				</ul>
			</div>
		</div>
	</div>
	<script src='./jquery/jquery-3.2.1.min.js'></script>

	<script type="text/javascript">
		function finder(id){
			return typeof id==='string'?document.getElementById(id):id;
		}
		window.οnlοad=function(){
			var lis=finder('header').getElementsByTagName('li');
			var divs=finder('content').getElementsByTagName('div');
			for(var i=0; i<lis.length; i++){
				lis[i].id = i;
				lis[i].οnmοuseοver=function(){
					for(var j=0;j<lis.length;j++){
						lis[j].className = '';
						divs[j].style.display = 'none';
					}
					this.className = 'select';
					divs[this.id].style.display = 'block';

				}
			}

		
		    var i = 0;
			var timer = null;
			function setMyTimer(){
				timer = setInterval(function(){
					if(i >= lis.length){
						i = 0;
					}
					for(var j=0;j<lis.length;j++){
						lis[j].className = '';
						divs[j].style.display = 'none';
					}
					lis[i].className = 'select';
					divs[i].style.display = 'block';
					i++;
				},2000)
			}

			$("lis").on("mouseover",function(){
				timer && clearInterval(timer);
				timer = null;
			})
			$("lis").on("mouseout",function(){
				(!timer) && setMyTimer();
			})
			setMyTimer();
		}

	</script>
</body>
</html>

主要思路为：选项栏五个选项按钮，对应着下面的五个div，控制按钮索引的切换，从而切换不同的div，其他的隐藏。自动

切换即让索引值自动增加，从而使div跟随着变化。

jiaweimin123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS +js 实现tab选项卡，自动轮换

Tab-选项切换 *{ margin: 0; padding: 0; } .container{ width: 500px; height: 180px; margin: 20px auto; border: 1px solid red; } .header{ width: 500px; height: 40px; /*bo
复制链接

扫一扫

专栏目录