標題非常簡潔的切換方法，但不知道問題出在哪里？
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ? ? *{
? ? ? ? ?margin:0;
? ? ? ? ?padding:0;
? ? ? ? ?box-sizing: border-box
? ? ? ? ?}
? ? ? ? body{
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:100%;
? ? ? ? }
? ? ? ? .con{
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:100%;
? ? ? ? ? ? margin:10px auto;
? ? ? ? }
? ? ? ? .houseInfo{
? ? ? ? ? ? border:1px solid #ccc;
? ? ? ? ? ? border-bottom:2px solid red;
? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? font-family:"黑體";
? ? ? ? ? ? display:inline-block;
? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? padding:0 20px;
? ? ? ? ? ? border-radius:2px;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? margin-top:-2px;
? ? ? ? ? ? min-height:110px;
? ? ? ? ? ? padding-top:10px;
? ? ? ? ? ? border:1px solid blue;
? ? ? ? ? ? border-top:2px solid red;
? ? ? ? }
? ? ? ??
? ? ? ? li{
? ? ? ? ? ?padding-left:5px;
? ? ? ? ? ?list-style:none;
? ? ? ? ? ?line-height:20px;
? ? ? ? ? ?font-size:12px;
? ? ? ? ? ?font-weight:bold;
? ? ? ? ? ?font-family:"微軟雅黑";
? ? ? ? ? ?}
? ? ? ? .tabOn{
? ? ? ? ? ?border-top:2px solid red;
? ? ? ? ? ?border-bottom:2px solid #fff;
? ? ? ? }
? ? ? ?
? ? </style>
? ??
?
</head>
<body>
<!-- HTML頁面布局 -->
? ? <div>
? ? ? ? <h4 class="houseInfo tabOn">房產</h4>
? ? ? ? <h4>家居</h4>
? ? ? ? <h4>二手房</h4>
? ? ? ? <ul id="info1">
? ? ? ? ? ?<li>275萬購昌平鄰鐵三居 總價20萬買一居</li>?
? ? ? ? ? ?<li>200萬內購五環三居 140萬安家東三環</li>
? ? ? ? ? ?<li>北京首現零首付樓盤 53萬購東5環50平</li>
? ? ? ? ? ?<li>京樓盤直降5000 中信府 公園樓王現房</li>
? ? ? ? </ul>
? ? ? ? <ul id="info2">
? ? ? ? ? ?<li>40平出租屋大改造 美少女的混搭小窩</li>?
? ? ? ? ? ?<li>經典清新簡歐愛家 90平老房煥發新生</li>
? ? ? ? ? ?<li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ?<li>瓷磚就像選好老婆 衛生間煙道的設計</li>
? ? ? ? </ul>
? ? ? ? <ul id="info3">
? ? ? ? ? ?<li>通州豪華3居260萬 二環稀缺2居250w甩</li>?
? ? ? ? ? ?<li>西3環通透2居290萬 130萬2居限量搶購</li>
? ? ? ? ? ?<li>黃城根小學學區僅260萬 121平70萬拋!</li>
? ? ? ? ? ?<li>獨家別墅280萬 蘇州橋2居優惠價248萬</li>
? ? ? ? </ul>
? ? </div>?
?<script type="text/javascript">
? ? // JS實現選項卡切換
? ? ?window.onload = function(){
? ? ? ? console.log(111);
? ? var houseInfo=document.getElementsByClassName("houseInfo");
? ? ?
? ? for(var i=0;i<houseInfo.length;i++){
? ? ?var houseInfo[i].index=i;
? ? ? ? this.onclick=function(){
? ? ? ? ? ? this.className("houseInfo tabOn");
? ? ? ? ? ? var info=document.getElementsById("info"+(this.index+1));
? ? ? ? ? ? info.style.display="block";
? ? ? ? ? ? var houother=sibling(houseInfo[i]);
? ? ? ? ? ? for(var j=0;j<houother.length;j++){
? ? ? ? ? ? ? ? houother[j].className("houseInfo");
? ? ? ? ? ? }
? ? ? ? ? ? var infother=sibling(info);
? ? ? ? ? ? for(var j=0;j<infother.length;j++){
? ? ? ? ? ? ? ? infother[j].style.display="none";
? ? ? ? ? ? }
? ? ? ? })
? ? }
? ? }
? ??
? ? function sibling(elem) {?
? ? var r = [];?
var n = elem.parentNode.firstChild;?
for ( ; n; n = n.nextSibling ) {?
? ?if ( n.nodeType === 1 && n !== elem ) {?
? ? ? ?r.push( n );?
? ?}?
}?
return r;?
}
? ??
? ??
? ??
? ? </script>
</body>
</html>
2015-10-09
我的意思是可以實現多個選項卡的切換，多謝你的回答~
2015-09-30
問題很多，樣式是塊級元素與行級元素理解不清。js不僅語法上存在錯誤，而且邏輯上可能你想多了，因此直接重寫代碼如下，你看自己能否看懂。
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實踐題?-?選項卡</title> ????<style?type="text/css"> ?????/*?CSS樣式制作?*/?? ????????*{ ?????????margin:0; ?????????padding:0; ?????????box-sizing:?border-box ?????????} ????????body{ ????????????width:100%; ????????????height:100%; ????????} ????????.con{ ????????????width:100%; ????????????height:100%; ????????????margin:10px?auto; ????????} ????????/*.houseInfo{???改樣式*/ ??????????h4{ ????????????border:1px?solid?#ccc; ????????????border-bottom:2px?solid?red; ????????????font-size:16px; ????????????font-family:"黑體"; ????????????display:inline-block; ????????????line-height:30px; ????????????padding:0?20px; ????????????border-radius:2px; ????????} ????????ul{ ????????????margin-top:-2px; ????????????min-height:110px; ????????????padding-top:10px; ????????????border:1px?solid?red;???????/*改blue為red?*/ ????????????border-top:2px?solid?red; ????????????width:?250px;???????????????/*給寬度*/ ????????} ???????? ????????li{ ???????????padding-left:5px; ???????????list-style:none; ???????????line-height:20px; ???????????font-size:12px; ???????????font-weight:bold; ???????????font-family:"微軟雅黑"; ???????????} ????????.tabOn{ ???????????border-top:2px?solid?red; ???????????border-bottom:2px?solid?#fff; ????????} ?????? ????????/*增加輔助類*/ ???????.show{display:?block;} ???????.hide{display:?none;} ????</style> </head> <body> <!--?HTML頁面布局?--> ????<div> ????????<h4?class="tabOn">房產</h4> ????????<h4>家居</h4> ????????<h4>二手房</h4> ????????<ul?id="info1"> ???????????<li>275萬購昌平鄰鐵三居?總價20萬買一居</li>? ???????????<li>200萬內購五環三居?140萬安家東三環</li> ???????????<li>北京首現零首付樓盤?53萬購東5環50平</li> ???????????<li>京樓盤直降5000?中信府?公園樓王現房</li> ????????</ul> ????????<ul?id="info2"?class="hide">???? ???????????<li>40平出租屋大改造?美少女的混搭小窩</li>? ???????????<li>經典清新簡歐愛家?90平老房煥發新生</li> ???????????<li>新中式的酷色溫情?66平撞色活潑家居</li> ???????????<li>瓷磚就像選好老婆?衛生間煙道的設計</li> ????????</ul> ????????<ul?id="info3"?class="hide"> ???????????<li>通州豪華3居260萬?二環稀缺2居250w甩</li>? ???????????<li>西3環通透2居290萬?130萬2居限量搶購</li> ???????????<li>黃城根小學學區僅260萬?121平70萬拋!</li> ???????????<li>獨家別墅280萬?蘇州橋2居優惠價248萬</li> ????????</ul> ????</div>? ?<script?type="text/javascript"> ????//?JS實現選項卡切換 ?????window.onload?=?function(){ ????????//?console.log(111); ????var?oH=document.getElementsByTagName("h4"); ????var?oU=document.getElementsByTagName("ul"); ????? ????for(var?i=0;i<oH.length;i++){ ????????oH[i].index?=?i; ????????oH[i].onclick?=?function(){ ???????????for(var?j=0;j<oH.length;j++){ ??????????????oH[j].className=''; ??????????????oU[j].className='hide'; ???????????} ???????????this.className?=?'tabOn'; ???????????oU[this.index].className?=?'show'; ????????} ????} } </script> </body> </html>