js

选项卡切换功能
js_第1张图片

<style type="text/css">
.purple {
 background-color: purple;
 }
 .bottom .show {
     display: block;
 }
style>
<script type="text/javascript">
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
                for(var i=0;i//保存当前索引
                    btns[i].onclick = function(){
                        for(var j=0;j"";
                            divs[j].className = "";
                        }   
                        this.className = "red";
                        divs[this.index].className = "show";
                    }

                }
     }  
script>     
<body>
    <div class="box">
        <div class="top">
            <button>第一个button>
            <button>第二个button>
            <button>第三个button>
            <button>第四个button>
            <button>第五个button>
        div>
        <div class="bottom" id="divs">
            <div class="show">1好盒子div>
            <div>2好盒子div>
            <div>3好盒子div>
            <div>4好盒子div>
            <div>5好盒子div>
        div>
    div>
body>    

你可能感兴趣的:(javascript)