JavaScript選項卡

實現js選項卡

html的代碼如下：

<div class="tabdiv">
            <ul class="tabs" id="oTab">
                <li class="tabin1"><a href="#">房產</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">二手房</a></li>
            </ul>
            <div class="tabs_body" id="tab-list">
                <div class="show" id="tabs_body_main">
                    <a href="#">275萬購昌平鄰鐵三居 總價20萬買一居</a>
                    <a href="#">200萬內購五環三居 140萬安家東三環</a>
                    <a href="#">北京首現零首付樓盤 53萬購東5環50平</a>
                    <a href="#">京樓盤直降5000 中信府 公園樓王現房</a>

                </div>
                <div class="hide" id="tabs_body_main">
                    <a href="#"> 40平出租屋大改造 美少女的混搭小窩</a>
                    <a href="#">經典清新簡歐愛家 90平老房煥發新生</a>
                    <a href="#">新中式的酷色溫情 66平撞色活潑家居</a>
                    <a href="#"> 京樓盤直降5000 中信府 公園樓王現房</a>

                </div>
                <div class="hide" id="tabs_body_main">
                    <a href="#">通州豪華3居260萬 二環稀缺2居250w甩</a>
                    <a href="#">西3環通透2居290萬 130萬2居限量搶購</a>
                    <a href="#">黃城根小學學區僅260萬 121平70萬拋!</a>
                    <a href="#">獨家別墅280萬 蘇州橋2居優惠價248萬</a>

                </div>
            </div>
        </div>

1、通過滑鼠划過來看選中選項卡的哪個標題，其實也就是通過li的class=“tabin1”來改變選中標題樣式；

2、選中標題的內容也是通過class的轉變來控制，主要是使用display樣式；

3、選中標題和內容通過他們的下標來對應起來；

具體的js代碼實現如下所示：

var oTab = document.getElementById("oTab");
    var tabin = oTab.getElementsByTagName("li");
    var oDiv = document.getElementById("tab-list");
    var aDiv = oDiv.getElementsByTagName("div");
    for (var i = 0, len = tabin.length; i < len; i++) {
        tabin[i].index = i;
        tabin[i].onmouseover = function() {
            for (var i = 0; i < tabin.length; i++) {
                tabin[i].className = "";
            }
            this.className = "tabin1";
            for (var j = 0; j < aDiv.length; j++) {
                aDiv[j].className = "hide";
            }
            aDiv[this.index].className = "show";
        }
    }