javascript\html\CSS 選項卡，javascriptcss

javascript\html\CSS 選項卡，javascriptcss

效果：

代碼：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>選項卡</title>    <style type="text/css">     /* CSS樣式製作 */      .tabStyle{        list-style:none;        padding-left:5px;        margin-bottom:-2px;    }    .tabStyle li.libefore{        display:inline-block;        margin-left:10px;        border:1px solid gray;        padding:8px 15px;        border-bottom:0px;        cursor:pointer;            }    .tabStyle li.liafter{        display:inline-block;        margin-left:10px;        border:1px solid gray;        padding:8px 15px;        border-bottom:2px solid white;        border-top:2px solid brown;        cursor:pointer;            }        .contentStyle{        border:1px solid blue;        padding-left:10px;        width:300px;        display:none;    }    .contentStyleClicked{        border:1px solid blue;        padding-left:10px;        width:300px;        display:block;        border-top: 2px solid brown;    }           </style>    <script type="text/javascript">             // JS實現選項卡切換    window.onload=function(){        var tabs=document.getElementById("tabs").getElementsByTagName("ul")[0].getElementsByTagName("li");        var divs=document.getElementById("tabs").getElementsByTagName("div");                for(var i=0;i<tabs.length;i++){            (function(X){                tabs[X].onclick=function(){                    var divLength=divs.length;                    for(var j=0;j<divLength;j++){                        divs[j].className="contentStyle";                                    tabs[j].className="libefore";                    }                    this.className="liafter";                    divs[X].className="contentStyleClicked";                };             })(i);        }    }    </script> </head><body><!-- HTML頁面配置 -->    <div id="tabs">        <ul class="tabStyle" >            <li class="liafter">房產</li>            <li class="libefore">家居</li>            <li class="libefore">二手房</li>        </ul>        <div class="contentStyleClicked">            <p>275萬購昌平鄰鐵三居 總價20萬買一居</p>            <p>200萬內購五環三居 140萬安家東三環</p>            <p>北京首現零首付樓盤 53萬購東5環50平</p>            <p>京樓盤直降5000 中信府 公園樓王現房</p>        </div>        <div class="contentStyle">            <p>40平出租屋大改造 美少女的混搭小窩</p>            <p>經典清新簡歐愛家 90平老房煥發新生</p>            <p>新中式的酷色溫情 66平撞色活潑家居</p>            <p>瓷磚就像選好老婆 衛生間煙道的設計</p>        </div>        <div class="contentStyle">            <p>通州豪華3居260萬 二環稀缺2居250w甩</p>            <p>西3環通透2居290萬 130萬2居限量搶購</p>            <p>黃城根小學學區僅260萬 121平70萬拋!</p>            <p>獨家別墅280萬 蘇州橋2居優惠價248萬</p>        </div>    </div></body></html>