tab-切换

最新推荐文章于 2024-02-27 14:47:48 发布

f-z-k

最新推荐文章于 2024-02-27 14:47:48 发布

阅读量645

点赞数

分类专栏： js 文章标签： tab-切换

本文链接：https://blog.csdn.net/H5_FK/article/details/52125677

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换-改变标签className</title>
<style type="text/css">
*{

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		ul{
			overflow: hidden;
		}
		ul li{
			float: left;
			width: 100px;
			cursor:pointer;
			list-style: none;
		}
		#nars-con{
			width: 300px;
			height: 100px;
		}
		#nars-con div{
			width: 300px;
			height: 100px;
			/*display: none;*/
			border: 1px red solid;
		}
		#nars-con .nars-text{
			/*display: block;*/
		}
		ul .li-show{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="tab-nars">
		<ul>
			<li class="li-show">tab-1</li>
			<li>tab-2</li>
			<li>tab-3</li>
		</ul>
	</div>
	<div id="nars-con">
		<div class="nars-text" style="display:block;">11111111</div>
		<div style="display:none">33333333</div>
		<div style="display:none">222222</div>
	</div>
</body>
<!-- 未优化代码 -->
// <script type="text/javascript">
// 	 var a=document.getElementsByTagName('li');
// 	 var b=document.getElementById('nars-con').getElementsByTagName('div')
// 	 function hidden(){
// 	 	b[0].style.display="none";
// 	 	b[2].style.display="none";
// 	 	b[1].style.display="none";
// 	 }
// 	 for(var i=0;i<a.length;i++){
// 	 	a[i].index=i;
// 	 	a[i].οnmοuseοver=function(){
// 	 		hidden();
// 	 		b[this.index].style.display="block";
// 	 	}

// 	 }
// </script>
<!-- 优化后代码--减少一个for循环 -->
<script type="text/javascript">
	 var a=document.getElementsByTagName('li');
	 var b=document.getElementById('nars-con').getElementsByTagName('div')
	 // function hidden(){
	 // 	b[0].style.display="none";
	 // 	b[2].style.display="none";
	 // 	b[1].style.display="none";
	 // }
	 var pre=b[0];
	 for(var i=0;i<a.length;i++){
	 	a[i].index=i;
	 	a[i].οnmοuseοver=function(){
	 		pre.style.display="none";
	 		b[this.index].style.display="block";
	 		pre=b[this.index];
	 	}

	 }
</script>
</html>

margin: 0px;
padding: 0px;
}
ul{
overflow: hidden;
}
ul li{
float: left;
width: 100px;
cursor:pointer;
list-style: none;
}
#nars-con{
width: 300px;
height: 100px;
}
#nars-con div{
width: 300px;
height: 100px;
display: none;
border: 1px red solid;
}
#nars-con .nars-text{
display: block;
}
ul .li-show{
background-color: red;
}
</style>
</head>
<body>
<div class="tab-nars">
<ul>
<li class="li-show">tab-1</li>
<li>tab-2</li>
<li>tab-3</li>
</ul>
</div>
<div id="nars-con">
<div class="nars-text">11111111</div>
<div>33333333</div>
<div>222222</div>
</div>
</body>

// <script type="text/javascript">
// var a=document.getElementsByTagName('li');
// var b=document.getElementById('nars-con').getElementsByTagName('div');
// for(var i=0;i<a.length;i++){
// a[i].οnmοuseοver=function(){
// for(var i=0;i<a.length;i++){
// if (this==a[i]) {
// b[i].className="nars-text";
// a[i].className="li-show";
// }
// else{
// b[i].className="";
// a[i].className="";
// }
// }
// }
// }
// </script>

<script type="text/javascript">
var a=document.getElementsByTagName('li');
var b=document.getElementById('nars-con').getElementsByTagName('div')
var pre=a[0];
var pre1=b[0];
for(var i=0;i<a.length;i++){
a[i].index=i;
a[i].οnmοuseοver=function(){
pre.className="";
pre1.className="";
b[this.index].className="nars-text";
a[this.index].className="li-show";
pre=a[this.index];
pre1=b[this.index];
console.log(pre);
}
}
</script>
</html>