10-1編程挑戰。js部分，有什么問題，為什么不實現選項卡變換效果
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ? ?*{
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? ? ? ?font-family:"微軟雅黑";
? ? ? ?}
? ? ? ?#content{
? ? ? ? ? ?height:600px;
? ? ? ? ? ?width:600px;
?position:absolute;
?top:50px;
?left:50%;
?margin-left:-200px;
? ? ? ?}
? ? ? ?ul{
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?margin-left:10px;
? ? ? ? ? ?z-index:100;
? ? ? ?}
? ? ? ?ul li{
? ? ? ? ? ?list-style:none;
? ? ? ? ? ?font-size:20px;
? ? ? ? ? ?height:40px;
? ? ? ? ? ?width:100px;
? ? ? ? ? ?line-height:40px;
? ? ? ? ? ?text-align:center;
? ? ? ? ? ?border:2px solid gray;
? ? ? ? ? ?display:inline-block;
? border-bottom:none;
??
? ? ? ?}
? ? ? ?div div{
? ? ? ? ? ?border:2px solid blue;
? border-top:4px solid #cc9900;
? display:none;
? ? ? ? ? ?position:absolute;
? top:44px;
? ? ? ? ? ?height:150px;
? ? ? ? ? ?width:400px;
? padding:10px 15px 10px 10px;
? font-size:18px;
? ? ? ?}
? ul .selected{
border-top:4px solid #cc9900;
border-bottom:4px solid white;
? }
? ? ? ?div .selected{
display:inline-block;
? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?// JS實現選項卡切換
??
//選項卡實現思路
//第一步：
//鼠標滑倒某一個li上，先讓所有li都沒有select樣式，然后再讓當前li有select樣式
//第二步：要操作誰就線獲取誰
var div1=document.getElementById("content");
var lis=div1.getElementsByTagName("li");
var divs=div1.getElementsByTagName("div");
//第三步：給我們的li綁定鼠標移上去的事件
for(i=0;i<lis.length;i++){
lis[i].k=i;
lis[i].onmouseover=function(){
changecolor(this.k);
}
}
//第四步：制定一個功能方法，實現我們的需求
//nIndex是我們定義形參，代表當前被選擇的元素索引
function changecolor(k){
for(var j=0;j<lis.length;j++){
lis[j].className="";
divs[j].className="";
}
lis[k].className="selected";
divs[k].className="selected";
}
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="content">
? ? <ul>
? ? ? ? <li>房產</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>275萬購昌平鄰鐵三居 總價20萬買一居<br/>
? ? 200萬內購五環三居 140萬安家東三環<br/>
? ? 北京首現零首付樓盤 53萬購東5環50平<br/>
? ? 京樓盤直降5000 中信府 公園樓王現房</div>
? ? <div> 40平出租屋大改造 美少女的混搭小窩<br/>
? ? ?經典清新簡歐愛家 90平老房煥發新生<br/>
? ? ?新中式的酷色溫情 66平撞色活潑家居<br/>
? ? ?瓷磚就像選好老婆 衛生間煙道的設計</div>
? ? <div> ?通州豪華3居260萬 二環稀缺2居250w甩<br/>
? ? ?西3環通透2居290萬 130萬2居限量搶購<br/>
? ? ?黃城根小學學區僅260萬 121平70萬拋!<br/>
? ? ?獨家別墅280萬 蘇州橋2居優惠價248萬</div>
</div>
?
</body>
</html>
2017-05-29
因為在加載var lis=div1.getElementsByTagName("li");時，瀏覽器還未加載到li標簽，所以li是未定義的，只要把js部分放在瀏覽器加載完頁面后加載即可正常實現“window.onload可實現此功能”