為什么這里設(shè)置（that.className="select";）可以使用反而根據(jù)視頻教程編寫(xiě)的（ titles[that.index].className="select";），就沒(méi)反應(yīng)呢？
function select(id){
return typeof id==="string"?document.getElementById(id):id;
}
window.onload=function(){
var timer =null;
?var titles =select("notice-tit").getElementsByTagName("li"),
? divs ? =select("notice-con").getElementsByTagName("div");
? if(titles.length!==divs.length){
? return;
? }
? for (var i =0;i<titles.length;i++){
? titles[i].index=i;
? titles[i].onmouseover=function(){
? var that=this;
? if (timer){
? clearTimeout(timer);
? timer=null;
? }
? timer =setTimeout(function(){
? for(var j=0;j<titles.length;j++){
? titles[j].className="";
? divs[j].style.display="none";
? }
? that.className="select";
? /* titles[that.index].className="select";*/
? divs[that.index].style.display="block";
? },500);
? }
? }
}
2016-07-27
我做了我的可以。你前面既然that可以用證明基本上是對(duì)的?？赡芫褪且粋€(gè)沒(méi)注意的地方。F12控制臺(tái)報(bào)錯(cuò)看看是第幾行。我的布局和老師的不一樣。代碼不同。
<!DOCTYPE html>
<html>
<head>
? <meta http-equiv="content-type" content="text/html;charset=utf-8" />
? <title>tab切換</title>
? <style type="text/css">
? *{margin: 0px;padding: 0px;list-style:none;font-size: 16px;}
? .tab{margin: 50px auto;position: relative;width: 600px;height:98px;overflow: hidden;border: 1px solid #ccc;}
? .notice1{width: 600px;height:27px;}
? .notice1 li{width: 118px;height: 27px;text-align: center;background: #f7f7f7;float: left;border-bottom: 1px solid #eee;line-height: 27px;padding: 0 1px}
? .notice1 li a,.notice2 li a{text-decoration: none;color: #000}
? .notice1 .select{background: #fff;border-bottom: 1px solid #fff;border-left: 1px solid #eee;border-right: 1px solid #eee ;padding: 0px 0px;font-weight:bold;}
? .notice2 li{float: left;margin:7px 10px;width: 280px;text-align: center;}
? </style>
</head>
<body>
??? <div id="tab" class="tab">
????? <ul id="notice1" class="notice1">
??????? <li><a href="">公共</a></li>
??????? <li><a href="">規(guī)則</a></li>
??????? <li><a href="">論壇</a></li>
??????? <li><a href="">安全</a></li>
??????? <li class="select"><a href="">公益</a></li>
????? </ul>
????? <ul class="notice2" style="display:none">
??????? <li><a href="">公共廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">公共廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">公共廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">公共廁所公關(guān)廣告公關(guān)廣告</a></li>
????? </ul>
????? <ul class="notice2" style="display:none">
??????? <li><a href="">規(guī)則廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">規(guī)則廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">規(guī)則廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">規(guī)則廁所公關(guān)廣告公關(guān)廣告</a></li>
????? </ul>
????? <ul class="notice2" style="display:none">
??????? <li><a href="">論壇廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">論壇廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">論壇廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">論壇廁所公關(guān)廣告公關(guān)廣告</a></li>
????? </ul>
????? <ul class="notice2" style="display:none">
??????? <li><a href="">安全廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">安全廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">安全廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">安全廁所公關(guān)廣告公關(guān)廣告</a></li>
????? </ul>
????? <ul class="notice2" style="display:block">
??????? <li><a href="">難難廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">難難廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">難難廁所公關(guān)廣告公關(guān)廣告</a></li>
??????? <li><a href="">難難廁所公關(guān)廣告公關(guān)廣告</a></li>
????? </ul>
??? </div>
</body>
? <script type="text/javascript" >
? window.onload=function(){
??? var timer=null;
?? ?
??? var onotice1 = document.getElementById("notice1");
??? var oli = onotice1.getElementsByTagName("li");
??? var otab = document.getElementById("tab");
??? var oul = otab.getElementsByTagName("ul");
??? for (var i = 0;i<oli.length; i++) {
??????? oli[i].index=i+1;
??????? oli[i].onmouseover=function(){
????????? var that=this
????????? clearTimeout(timer);
???????? ?
????????? timer=setTimeout(function(){
??????????? for (var j= 0; j<oli.length; j++) {
????????????? oli[j].className="";
????????????? oul[j+1].style.display="none";
??????????? };
??????????? that.className="select";//設(shè)置當(dāng)前鼠標(biāo)經(jīng)過(guò)的li添加class.
??????????? oul[that.index].style.display="block";
????????? },500)
??????? }
??? }
? }
? </script>
</html>
2016-07-27
我一會(huì)做一下試試。