javascriptに基づいて、最も簡単なタブ切り替えを実現します。
本文教では、生jsで実現した最も簡単なタブで効果を切り替え、マウスが滑ったことがあります。
コードは最も簡潔で、js行為最適化版で、コピーして貼り付けすればいいです。
コードは最も簡潔で、js行為最適化版で、コピーして貼り付けすればいいです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript- </title>
<style>
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tabli{float:left;color:#fff;height:30px;
cursor:pointer;line-height:30px;list-style-type:none;
padding:0 20px;}
#tab li.current{color:#000;background:#ddd;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;
display:none;margin:0 30px;padding:10px 0;}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current"> </li>
<li> </li>
<li> </li>
</ul>
<div id="content">
<ul style="display:block;">
<li> </li>
<li> </li>
<li> </li>
<li>javascript</li>
<li> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li>126 </li>
<li> </li>
<li> </li>
<li> </li>
<li>for if </li>
</ul>
<ul>
<li> ： 、 、 、 </li>
<li> ：setInterval、setTimeout</li>
<li> ： </li>
<li> ： </li>
<li> ： </li>
<li> </li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(){
var $ = function(id){
return document.getElementById(id);
}
// dom
var myli = $("tab").getElementsByTagName("li");
var myul = $("content").getElementsByTagName("ul");
// ， ul， ，
for(var i=0;i<myli.length;i++){
myli[i].index = i; //
myli[i].onmouseover=function(){
// ul， li ，
for(var n=0;n<myli.length;n++){
myli[n].className ="";
myul[n].style.display="none";
this.className="current";
myul[this.index].style.display="block";
}
}
}
})()
</script>
</body>
</html>