<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换-改变标签className</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">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>
<!-- 优化后代码,去掉一个for循环减少浏览器执行次数 -->
<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>
<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>
<!-- 优化后代码,去掉一个for循环减少浏览器执行次数 -->
<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>