CSS樣式和index屬性
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
*{padding:0;margin:0;font-family:"微軟雅黑";font-size:16px;}
? ? #tabs{width:350px;height:200px;margin:20px auto;}
#tabs ul{list-style:none;height:30px;line-height:30px;}
#tabs ul li{float:left; width:70px;height:28px;line-height:28px;text-align:center;border:1px solid #ccc;margin:0px 3px;border-bottom:none;display:inline-block;}
#tabs ul li.on{border-top:2px solid red;border-bottom:2px solid #fff;}
#tabs div{width:350px;height:170px;line-height:30px;border:1px solid #ccc; clear:both;border-top:2px solid red;padding:5px 10px;}
.hide{display:none;}
? ? </style>?
? ? <script type="text/javascript"> ? ??
? ? window.onload = function(){
? ? ? ? var a = document.getElementById("tabs");
? ? ? ? var b = document.getElementsByTagName("li");
? ? ? ? var c = a.getElementsByTagName("div");
? ? ? ??
? ? ? ? for (i=0;i<b.length;i++){
? ? ? ? ? ? b[i].index = i;
? ? ? ? ? ? b[i].onmouseover = function(){
? ? ? ? ? ? ? ? for(n=0;n<b.length;n++){
? ? ? ? ? ? ? ? ? ? b[n].className = "";
? ? ? ? ? ? ? ? ? ? c[n].className = "hide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className = "on";
? ? ? ? ? ? ? ? c[this.index].className = "";
? ? ? ? ? ? }
? ? ? ? }
? ? }
?
? ??
? ? </script>
?
</head>
<body>
<!-- HTML??沼?? -->
<div id="tabs" >
? <ul id="b">
? ? ? <li>房產</li>
? ? ? <li>家居</li>
? ? ? <li>二手房</li>
? </ul>
? <div>
? ? ? 275萬購昌平鄰鐵三居 總價20萬買一居<br>
? ? ? 200萬內購五環三居 140萬安家東三環<br>
? ? ? 北京首現零首付樓盤 53萬購東5環50平<br>
? ? ? 京樓盤直降5000 中信府 公園樓王現房<br>
? </div>
? ? <div>
? ? ? 40平出租屋大改造 美少女的混搭小窩<br>
? ? ? 經典清新簡歐愛家 90平老房煥發新生<br>
? ? ? 新中式的酷色溫情 66平撞色活潑家居<br>
? ? ? 瓷磚就像選好老婆 衛生間煙道的設計<br>
? </div>
? ? <div>
? ? ? 通州豪華3居260萬 二環稀缺2居250w甩<br>
? ? ? 西3環通透2居290萬 130萬2居限量搶購<br>
? ? ? 黃城根小學學區僅260萬 121平70萬拋!<br>
? ? ? 獨家別墅280萬 蘇州橋2居優惠價248萬<br>
? </div>
</div>
?
</body>
</html>
問題1：
上面的樣式只能實現這樣：
要怎樣才能使菜單和DIV交接的地方沒有線？就是這樣的：
問題2：
關于上面的函數：
?window.onload = function(){
? ? ? ? var a = document.getElementById("tabs");
? ? ? ? var b = document.getElementsByTagName("li");
? ? ? ? var c = a.getElementsByTagName("div");
? ? ? ? for (i=0;i<b.length;i++){
? ? ? ? ? ? b[i].index = i;
? ? ? ? ? ? b[i].onmouseover = function(){
? ? ? ? ? ? ? ? for(n=0;n<b.length;n++){
? ? ? ? ? ? ? ? ? ? b[n].className = "";
? ? ? ? ? ? ? ? ? ? c[n].className = "hide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className = "on";
? ? ? ? ? ? ? ? c[this.index].className = "";
? ? ? ? ? ? }
? ? ? ? }
? ? }
這里之所以使用this和index是因為b[i]無法作為參數傳入到函數里嗎？我知道this是代替b[i]的。那么在什么時候應該使用this和index?index是什么屬性？
2015-12-31
第一個問題：首先你要把#tabs div中的clear：both去掉不要清除浮動，就可以實現了。
第二個問題：要在函數中獲取for循環中的i的值，就要把i的值傳遞到onmouseover函數中去，但問題是當執行onmouseover事件時，for?循環里的變量?i?已經被垃圾回收了，所以就找不到i變量了。你的函數用的是將變量 i 保存給在每個段落對象（“li”）上，所以要用this去找到這個（“li”），index就是代表的是元素在數組中的位置，但是這個index中在這個函數中表示的是你自己的定義的名稱，你可以換成b[i].ss = i;也可以換成b[i].aa = i;都是可以的，所以這個index只是習慣這樣用，并不是非要這么用。
2015-12-20
什么時候使用this和index : 涉及引用的時候就要用this，涉及到多個同類元素的操作的時候就要用到index；index代表的是位置