選項卡切換不了，不曉得是哪里出錯了
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */
???? *{margin:0;padding:0;font:normal? 12px "Microsoft yahei";}
??? .box{width:290px;padding:5px;margin:20px;height:150px;}
??? .box .box_title{height:30px;line-height:30px;padding-left:0;}
??? .box .box_title li{display:inline-block;width:60px;height:28px;line-height:28px;border:1px solid #ccc;border-bottom:none;list-style-type:none;text-align:center;margin-right:5px;}
??? .box .box_title li.on{border-top:2px solid #f00;border-bottom:2px solid #fff;}
??? .box div{padding:0 15px;height:150px;border:1px solid #ccc;border-top:2px solid #f00;width:100%;overflow:hidden;line-height:30px;}
??? .hide{display:none;}
??? </style>
??? <script type="text/javascript">
??????? ?
??? // JS實現(xiàn)選項卡切換
window.onload=function(){
??? var Box=document.getElementById("box");
??? var ul=Box.getElementsByTagName("ul")[0];
??? var lis=ul.getElementsByTagName("li");
??? var divs=lis.getElementsByTagName("div");
?? ?
??? var len=lis.length;
??? for(var i=0;i<len;i++){
??????? lis[i].index=i;
??????? lis[i].onclick=function(){
??????????? for(var n=0;n<len;n++){
???????????????? lis[n].className="";
???????????????? lis[n].className="hide";
??????????? }
??????? this.className="on";
??????? divs[this.index].className="";
?????????? ?
??????? }
?????? ?
??? };
}
??? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="box">
??? <ul>
??????? <li>房產(chǎn)</li>
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>275萬購昌平鄰鐵三居 總價20萬買一居</br>
??????? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</br>
??????? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</br>
??????? 京樓盤直降5000 中信府 公園樓王現(xiàn)房</br>
??? </div>
??? <div>40平出租屋大改造 美少女的混搭小窩</br>
???????? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</br>
???????? 新中式的酷色溫情 66平撞色活潑家居</br>
???????? 瓷磚就像選好老婆 衛(wèi)生間煙道的設計</br>
??? </div>
?? ?
??? <div>通州豪華3居260萬 二環(huán)稀缺2居250w甩</br>
???????? 西3環(huán)通透2居290萬 130萬2居限量搶購</br>
???????? 黃城根小學學區(qū)僅260萬 121平70萬拋!</br>
???????? 獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</br>
??? </div>
?</div>
</body>
</html>
2016-06-20
window.onload=function(){ ????????var?Box=document.getElementById("box"); ????????var?ul=Box.getElementsByTagName("ul")[0]; ????????var?lis=ul.getElementsByTagName("li"); ????????var??var?divs=lis.getElementsByTagName("div");//應該是divs=Box.getElementsByTagName("div"); ???????? ????????var?len=lis.length; ????????for(var?i=0;i<len;i++){ ????????????lis[i].index=i; ????????????lis[i].onclick=function(){ ????????????????for(var?n=0;n<len;n++){ ?????????????????????lis[n].className=""; ?????????????????????lis[n].className="hide";//應該是divs[n].className="hide"; ????????????????} ????????????this.className="on"; ????????????divs[this.index].className=""; ???????????????? ????????????} ???????? ????};2016-06-15
問題出在循環(huán)那里，循環(huán)給li加上onclick事件，當onclink事件點擊的時候，循環(huán)讓所有選項卡li的樣式去掉，所有的div內(nèi)容隱藏。然后讓所點擊的選項，及對應內(nèi)容顯示。
參考我的答案：
for (var i=0;i<len;i++){
? ? ? ? ? ? ? ? tab_t_li[i].index=i;
? ? ? ? ? ? ? ?tab_t_li[i].onclick= function(){
? ? ? ? ? ? ? ? ? ? for(i=0; i<len; i++){
? ? ? ? ? ? ? ? ? ? ? ?tab_t_li[i].className = '';
? ? ? ? ? ? ? ? ? ? ? ? tab_c_li[i].className = 'hide';
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? tab_t_li[this.index].className = 'act';
? ? ? ? ? ? ? ? ? ? tab_c_li[this.index].className = '';
? ? ? ? ? ? ? ? }
2016-06-15
請檢查這段代碼，謝謝。