tab

最新推荐文章于 2024-08-26 14:00:09 发布

Lo-ra

最新推荐文章于 2024-08-26 14:00:09 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yana_loo/article/details/54428826

HTML

<atricle>
    <aside>
        <ul id="tab">
            <li class="active">first</li>
            <li>second</li>
            <li>third</li>
            <li>fourth</li>
        </ul>
    </aside>
    <aside>
        <div class="content" name="display">first</div>
        <div class="display" name="display">second</div>
        <div class="display" name="display">third</div>
        <div class="display" name="display">fourth</div>
    </aside>
</atricle>

javascript(1)

<script>
    var tabs=document.getElementById("tab").getElementsByTagName("li");
    var divs=document.getElementsByName("display");

    for(var i=0;i<tabs.length;i++){
        tabs[i].onclick=function () {
            change(this);
        }
    }

    function change(obj) {
        for(var i=0;i<tabs.length;i++){
            if(tabs[i]==obj){
                tabs[i].className="active";
                divs[i].className="content"
            }else{
                tabs[i].className="";
                divs[i].className="display";
            }
        }
    }
</script>