自定义标签页

来源：互联网发布：守望先锋最新英雄数据编辑：程序博客网时间：2024/06/06 05:46

CSS代码如下：

.tab-box{    border: 1px solid #e6e6e6;}.tab-box-menu {    border-bottom: 1px solid #e6e6e6;    height: 45px;    line-height: 45px; }.tab-box-menu li{    cursor: pointer;    padding-left: 50px;    padding-right: 50px;    float: left;    border-right: 1px solid #e2e2e2;}.tab-box-menu li.hover{    background: #0099e6;    color: #fff;}.tab-box-content li{    height:210px;}

HTML代码如下：

<div class="tab-box">    <ul class="tab-box-menu">       <li id="one1" onclick="setTab('one',1,2)" class="hover">Tab 1</li>       <li id="one2" onclick="setTab('one',2,2)">Tab 2</li>    </ul>    <ul class="tab-box-content">        <li id="con_one_1">            这里是tab 1        </li>         <li id="con_one_2" style="display:none">            这里是tab 2        </li>     </ul></div>

JS代码如下：

function setTab(name,cursel,n){    for(var i=1;i<=n;i++){        var menu=document.getElementById(name+i);        var con=document.getElementById("con_"+name+"_"+i);        menu.className=i==cursel?"hover":"";        con.style.display=i==cursel?"block":"none";    }}

效果如下：
这里写图片描述

阅读全文

0 0