Tab切换和自动切换

最新推荐文章于 2023-06-07 11:15:44 发布

白日梦想jun

最新推荐文章于 2023-06-07 11:15:44 发布

阅读量468

点赞数

分类专栏： JavaScript 文章标签： tab切换自动切换

本文链接：https://blog.csdn.net/oiu1010110/article/details/64158161

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

说明：

(1) 鼠标放到每个选项上，就出现相应的内容。

(2) 鼠标hover到元素上，该元素的样式改变

(3) 当鼠标离开时，选项、内容按时间变化。

(4) 这里没有用封装的思想，有时间再倒腾。

效果图：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="tabTrasform.css">
</head>
<body>
<div class="box">
	<ul class="navTab">
		<li class="activeTab">公告</li>
		<li>规则</li>
		<li>论坛</li>
		<li>安全</li>
		<li>公益</li>
	</ul>

	<div class="content activeCon">
		<div class="one">
			<a href="#">个人信息要牢管1</a>
			<a href="#">个人信息要牢管1</a>
		</div>
		<div class="one">
			<a href="#">个人信息要牢管1</a>
			<a href="#">个人信息要牢管1</a>
		</div>
	</div>
	<div  class="content">
		<div class="one">
			<a href="#">个人信息要牢管2</a>
			<a href="#">个人信息要牢管2</a>
		</div>
		<div class="one">
			<a href="#">个人信息要牢管2</a>
			<a href="#">个人信息要牢管2</a>
		</div>
	</div>
	<div  class="content">
		<div class="one">
			<a href="#">个人信息要牢管3</a>
			<a href="#">个人信息要牢管3</a>
		</div>
		<div class="one">
			<a href="#">个人信息要牢管3</a>
			<a href="#">个人信息要牢管3</a>
		</div>
	</div>
	<div  class="content">
		<div class="one">
			<a href="#">个人信息要牢管4</a>
			<a href="#">个人信息要牢管4</a>
		</div>
		<div class="one">
			<a href="#">个人信息要牢管4</a>
			<a href="#">个人信息要牢管4</a>
		</div>
	</div>
	<div class="content">
		<div class="one">
			<a href="#">个人信息要牢管5</a>
			<a href="#">个人信息要牢管5</a>
		</div>
		<div class="one">
			<a href="#">个人信息要牢管5</a>
			<a href="#">个人信息要牢管5</a>
		</div>
	</div>
</div>

<script type="text/javascript" src="tabTrasform.js"></script>
</body>
</html>

CSS：

body,ul,li,a{
	padding: 0;
	margin: 0;
}
li{
list-style: none;
}
a{
	text-decoration: none;
}
body{
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-family: "微软雅黑";
	background-color: #eee;
}
.box{
	width: 500px;
	margin: 100px auto;
	border:1px solid red;
}
.navTab{
	width: 500px;
	height:50px;
}
.navTab > li{
	width: 100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	background-color: #f3e6a2;
	float: left;
}
.navTab > li:hover{
	background-color: #fff;
	cursor: pointer;
}
.navTab > li.activeTab{
	background-color: #fff;
}

.content{
	width: 480px;
	padding: 10px;
	background-color: #fff;
	display: none;
}
.activeCon{
	display: block;
}
.content .one{
	width: 100%;
	height: 50px;
	text-align: left;
}

.content .one a{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	margin-left: 60px;
}

.content .one a:hover{
	color: orange;
}

tabTrasform1.js：

window.onload = function () {
	//获取nav项
	var box = document.getElementsByClassName('box')[0];
	var navTab= document.getElementsByTagName('ul')[0];
	var navTabLi = navTab.getElementsByTagName('li');
	
	//获取内容项
	var con = document.getElementsByClassName("content");


	var cur_index = 0; //记录当前下标


	// 1.默认自动播放显示
	var timer;
	timer = setInterval(showCon,2000);
	// 2.鼠标移入停止自动，鼠标移出自动播放
	box.onmouseover = function(){
		clearInterval(timer);
		tab();
	}
	box.onmouseout = function(){
		timer = setInterval(showCon,2000);
	}


	//手动切换显示内容
	function tab(){
			//鼠标移入选项,显示相应内容
		if (navTabLi.length != con.length) {
			return;
		}else{
				for(var i = 0;i < navTabLi.length;i++){
					navTabLi[i].index = i;
					navTabLi[i].onmouseover = function(){
						cur_index = this.index; //给当前下标赋值
						showCon();
					}
				}
			}
	}


	//显示当前下标的内容
	function showCon(){
		if (navTabLi.length != con.length) {
			return;
		}else{
				//1.判断
				//2.显示
				//3.当前自增
				if(cur_index  > navTabLi.length-1){
					cur_index = 0;
				}
				
				//去掉所有的样式
				console.log(cur_index);
				for(var j = 0;j< navTabLi.length;j++){
					navTabLi[j].className = '';
					con[j].className = 'content';
				}
				//给当前的添加样式
				navTabLi[cur_index].className = 'activeTab';
				con[cur_index].className = 'content activeCon';


				cur_index++;
			}

	}	

}

或者tabTrasform.js：

window.onload = function () {
	//获取nav项
	var box = document.getElementsByClassName('box')[0];
	var navTab= document.getElementsByTagName('ul')[0];
	var navTabLi = navTab.getElementsByTagName('li');
	
	//获取内容项
	var con = document.getElementsByClassName("content");


	var cur_index = 0; //记录当前下标


	
	
	//默认自动播放显示
	var timer;
	timer = setInterval(autoChange,2000);
	//鼠标移入停止自动，鼠标移出自动播放
	box.onmouseover = function(){
		clearInterval(timer);
		tab();
	}
	box.onmouseout = function(){
		timer = setInterval(autoChange,2000);
	}



	//显示内容
	function showCon(index){
		//去掉所有的样式
		console.log(index);
		for(var j = 0;j< navTabLi.length;j++){
			navTabLi[j].className = '';
			con[j].className = 'content';
		}
		//给当前的添加样式
		navTabLi[index].className = 'activeTab';
		con[index].className = 'content activeCon';

	}


	//手动切换显示内容
	function tab(){
			//鼠标移入选项,显示相应内容
		if (navTabLi.length != con.length) {
			return;
		}else{
			for(var i = 0;i < navTabLi.length;i++){
				navTabLi[i].index = i;
				navTabLi[i].onmouseover = function(){
					cur_index = this.index; //给当前下标赋值
					showCon(cur_index);
				}
			}
		}
	}

	//自动切换
	function autoChange(){
		if (navTabLi.length != con.length) {
			return;
		}else{
				if(cur_index  > navTabLi.length-1){
					cur_index = 0;
				}
				//注意：：：先显示再自增
				showCon(cur_index);
				cur_index++;
		}
	}
}