使用javascript實現(xiàn)簡單的選項卡切換

更新時間：2015年01月09日 08:59:47 投稿：hebedich

本文主要介紹了使用javascript實現(xiàn)簡單的選項卡切換的效果，代碼非常的簡單，兼容性十分棒，這里推薦給小伙伴們。

代碼相當簡潔、簡單易懂，就不多廢話了。

直接奉上代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8">
        <title>js簡單選項卡</title>
        <script type="text/javascript" src="js/demo.js"></script>

    </head>
    <body>
        <div class="tabs" id="tabs">
            <h2 class="tabs-nav clearfix">
                <a href="javascript:;" class="on">首頁</a>
                <a href="javascript:;">技術</a>
                <a href="javascript:;">生活</a>
                <a href="javascript:;">作品</a>
            </h2>
            <div style="clear:both;"></div>
            <p class="tabs-content">首頁</p>
            <p class="tabs-content_hide">技術</p>
            <p class="tabs-content_hide">生活</p>
            <p class="tabs-content_hide">作品</p>
        </div>

    </body>
<footer></footer>
</html>

------demo.js---------------

復制代碼代碼如下:

window.onload=function(){

    tabs("tabs","mouseover");

}

function tabs(id,trigger){

    var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a");

    var tabsContent = document.getElementById(id).getElementsByTagName("p");

    for(var i=0;i<tabBtn.length;i++){

        tabBtn[i].index = i;

        if(trigger=='mouseover'){

            tabBtn[i].onmouseover=function(){

                clearClass();

                this.className="on";

                showContent(this.index);

            }

        }

        function showContent(n){

            for (var i=0; i<tabsContent.length ;i++) {

                tabsContent[i].index = i;

                tabsContent[i].className = "tabs-content_hide";

        }

        tabsContent[n].className="tabs-content";

    }

        function clearClass(){

            for(var i=0;i<tabBtn.length;i++){

                tabBtn[i].className="";

            }

        }

    }

}