為什么用//中的內容替換 就沒有效果
? ? ?for(var j=0;j<li.length;j++){
? ? ? ? ? ? if(li[j]==obj){
? ? ? ? ? ? ? ? //li[j].class="on";
? ? ? ? ? ? ? ? //div[j].class="";
? ? ? ? ? ? ? ? li[j].setAttribute('class','on');
? ? ? ? ? ? ? ? div[j].setAttribute('class','');
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? //li[j].class="";
? ? ? ? ? ? ? ? //div[j].class="hide";
? ? ? ? ? ? ? ?li[j].setAttribute('class','');
? ? ? ? ? ? ? ? div[j].setAttribute('class','hide');
? ? ? ? ? ? } ??
? ? ? ? } ??
? ? ? ??
? ? ? ?
? ? ? ??
? ? }
2016-06-13
//li[j].class="on";
? ? ? ? ? ? ? ? //div[j].class="";
要用className，js直接用class是不行的
li[j].className="on";
? ? ? ? ? ? ? ? div[j].className="";
2016-04-23
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */?
? ? ?*{padding:0;margin:0;}
? ? ?#tabs ul li{float:left;list-style:none;background:#fff;border:1px solid #ccc;margin:15px 15px 0 0 ;width:50px;height:21px;text-align:center;border-bottom:none;font-family:"Microsoft Yahei";font-size:14px;}
? ? ?ul{width:250px;height:42px;}
? ? ?#tabs{margin:40px;}
? ? ?#tabs div{border:1px solid blue;width:273px;height:110px;font-size:14px;padding:7px 0 0 5px;margin-top:-5px;margin-left:-6px;border-top:2px solid brown;font-family:"Microsoft Yahei";}
? ? ?
? ? ?
? ? ?.hide{display:none;} ?
? ? ?a{text-decoration:none;color:#000;} ?
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現選項卡切換
? ??
? ? function tab(obj){
? ? ? ? var li=document.getElementsByTagName("li");
? ? ? ? var tab=document.getElementById("tabs");
? ? ? ? var div=tab.getElementsByTagName("div");
? ? ? ??
? ? ? ? for(var j=0;j<li.length;j++){
? ? ? ? ? ? if(li[j]==obj){
? ? ? ? ? ? ? ? //li[j].class="on";
? ? ? ? ? ? ? ? //div[j].class="";
? ? ? ? ? ? ? ? li[j].setAttribute('class','on');
? ? ? ? ? ? ? ? div[j].setAttribute('class','');
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? //li[j].class="";
? ? ? ? ? ? ? ? //div[j].class="hide";
? ? ? ? ? ? ? ?li[j].setAttribute('class','');
? ? ? ? ? ? ? ? div[j].setAttribute('class','hide');
? ? ? ? ? ? } ??
? ? ? ? } ??
? ? ? ??
? ? ? ?
? ? ? ??
? ? }
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabs">
? ? <ul>
? ? ? ? <li onClick="tab(this)"><a href="#">房產</a></li>
? ? ? ? <li onClick="tab(this)"><a href="#">家居</a></li>
? ? ? ? <li onClick="tab(this)"><a href="#">二手房</a></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>
?
?
</body>
</html>