JavaScript Tab切换

来源：互联网发布：2016网络大电影市场编辑：程序博客网时间：2024/05/21 06:22

实现按钮点击切换

（1）HTML布局

<div id="tabs">    <ul>        <li class="on">Monday</li>        <li>Tuesday</li>        <li>Wednesday</li>    </ul>    <div>        Life is always so we covered all over with cuts and bruises,        but later, the injured area will become the strong place.    </div>    <div class="hide">        Books are the stepping stones to human progress.    </div>    <div class="hide">        Always bear in mind that your own resolution to success is more important than any one thing .    </div></div>

（2）制作css样式

        *{            margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;        }        #tabs{            background: #ffffff; padding: 50px; width: 300px; height: 200px;        }        #tabs ul{            border-bottom: 2px saddlebrown solid; list-style: none;text-align: center; height: 30px;        }        #tabs ul li{            float: left; width:80px; border: 1px solid darkgrey;border-bottom: none; height: 20px; padding: 4px; margin:0 5px 0 2px;  cursor: pointer;        }        #tabs ul li.on{            border-top: 2px saddlebrown solid; border-bottom: 2px white solid;        }        #tabs div{            line-height: 24px; padding: 10px;border: 1px steelblue solid; border-top: none;        }        .hide{            display: none;        }

（3）JS实现tab切换

 var oTabs = document.getElementById("tabs");            var oUl = oTabs.getElementsByTagName("ul")[0];            var oLi = oUl.getElementsByTagName("li");            var oDiv = oTabs.getElementsByTagName("div");            var len = oLi.length;            for(var i=0;i<len;i++){                oLi[i].index = i;                oLi[i].onclick = function(){                    for(var n=0; n<len ; n++){                        oLi[n].className="";                        oDiv[n].className="hide";                    }                    this.className="on";                    oDiv[this.index].className="";                }            }

0 0