选项卡的实现

用JS怎么样能实现选项卡的作用?谢谢先

解决方案 »

  1.   

    楼主可以自己百度下 javascript滑动门
      

  2.   

    其实是控制id.style.display  none为隐藏 block为显示
      

  3.   

    css tab 菜单  纯css都能搞定
    http://paranimage.com/37/
    这有37个 可劲抄吧 现在做网页就是要会抄 
    老板不会让你有时间研究的  题外话了 
      

  4.   

    很早以前弄的,直接给你代码<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>标题页</title>
    <style>
    .conts{visibility:hidden}
    .tab{border-top:solid thin #E0E0E0;
    border-right:solid thin gray;
    border-left:solid thin #E0E0E0;
    font-family:Verdana;
    font-size:10pt;
    text-align:center;
    font-weight:normal}
    .selTab{border-left:solid thin white;
    border-top:solid thin white;
    border-right:solid thin black;
    font-weight:bold;
    text-align:center}
    .conts  {visibility:hidden}
    .tab{border-top:solid thin #E0E0E0;
    border-right:solid thin gray;
    border-left:solid thin #E0E0E0;
    font-family:Verdana;
    font-size:10pt;
    text-align:center;
    font-weight:normal}
    .selTab{border-left:solid thin white;
    border-top:solid thin white;
    border-right:solid thin black;
    font-weight:bold;
    text-align:center}
    </style>
    <script language="JavaScript">
    function public_Labels(label1, label2, label3, label4, label5, label6, label7){
    t1.innerText = label1;
    t2.innerText = label2;
    t3.innerText = label3;
    t4.innerText = label4;
    t5.innerText = label5;
    t6.innerText = label6;
    t7.innerText = label7;
    }
    //切换选项卡时显示选项卡的内容
    function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
    t1Contents.innerHTML = contents1;
    t2Contents.innerHTML = contents2;
    t3Contents.innerHTML = contents3;
    t4Contents.innerHTML = contents4;
    t5Contents.innerHTML = contents5;
    t6Contents.innerHTML = contents6;
    t7Contents.innerHTML = contents7;
    init();
    }
    //默认显示选项卡1
    function init(){
    tabContents.innerHTML = t1Contents.innerHTML;
    }
    //更换选项卡时的方法
    var currentTab;
    var tabBase;
    var firstFlag = true;
    function changeTabs(){
    if(firstFlag == true){
    currentTab = t1;
    tabBase = t1base;
    firstFlag = false;
    }
    //当用户单击选项卡时，修改样式及内容
    if(window.event.srcElement.className == "tab")
    {
    currentTab.className = "tab";
    tabBase.style.backgroundColor = "white";
    currentTab = window.event.srcElement;
    tabBaseID = currentTab.id + "base";
    tabContentID = currentTab.id + "Contents";
    tabBase = document.all(tabBaseID);
    tabContent = document.all(tabContentID);
    currentTab.className = "selTab";
    tabBase.style.backgroundColor = "";
    tabContents.innerHTML = tabContent.innerHTML;
    }}
    </script>
    </head>
    <body BGCOLOR="#c0c0c0" onclick="changeTabs()" onload="init()">
    <div STYLE="position:absolute; top:20; height:350; width:500; left:65; border:none thin gray">
    <table STYLE="width:600; height:350" CELLPADDING="0" CELLSPACING="0" bgcolor="c0c0c0">
    <tr><td ID="t1" CLASS="selTab" HEIGHT="25">选项 1</td>
    <td ID="t2" CLASS="tab">选项 2</td>
    <td ID="t3" CLASS="tab">选项 3</td>
    <td ID="t4" CLASS="tab">选项 4</td>
    <td ID="t5" CLASS="tab">选项 5</td>
    <td ID="t6" CLASS="tab">选项 6</td>
    <td ID="t7" CLASS="tab">选项 7</td>
    </tr><tr>
    <td ID="t1base" STYLE="height:2; border-left:solid thin white"></td>
    <td ID="t2base" STYLE="height:2; background-color:white"></td>
    <td ID="t3base" STYLE="height:2; background-color:white"></td>
    <td ID="t4base" STYLE="height:2; background-color:white"></td>
    <td ID="t5base" STYLE="height:2; background-color:white"></td>
    <td ID="t6base" STYLE="height:2; background-color:white"></td>
    <td ID="t7base" STYLE="height:2; background-color:white; border-right:solid thin white"></td>
    </tr><tr><td HEIGHT="*" COLSPAN="7" ID="tabContents"
    STYLE="border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white"> </td></tr></table></div><div CLASS="conts" ID="t1Contents">
    <p align="center">Tab1的内容 </p>
    </div><div CLASS="conts" ID="t2Contents">
    <p align="center">Tab2的内容 </p>
    </div><div CLASS="conts" ID="t3Contents">
    <p align="center">Tab3的内容 </p>
    </div><div CLASS="conts" ID="t4Contents">
    <p align="center">Tab4的内容 </p>
    </div><div CLASS="conts" ID="t5Contents">
    <p align="center">Tab5的内容 </p>
    </div><div CLASS="conts" ID="t6Contents">
    <p align="center">Tab6的内容 </p>
    </div><div CLASS="conts" ID="t7Contents"><p align="center">Tab7的内容 </p></div>
    </body>
    </html>
      

  5.   

    给你找了个，自己看吧：http://js.bhcode.net/javascript/20090811/18.html
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>我的滑动门</title>
    <style type="text/css">
    .nTab{
    float: left;
    width: 100%;
    margin: 0 auto;
    border-bottom:1px #AACCEE solid;
    background:#d5d5d5;
    background-position:left;
    background-repeat:repeat-y;
    margin-bottom:1px;
    }
    .nTab .TabTitle{
    clear: both;
    height: 22px;
    overflow: hidden;}
    .nTab .TabTitle ul{
    border:0;
    margin:0;
    padding:0;}
    .nTab .TabTitle li{
    float: left;
    width: 80px;
    cursor: pointer;
    padding-top: 4px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 2px;
    list-style-type: none;
    font-size: 12px;
    text-align: center;
    margin: 0;
    }
    .nTab .TabTitle .active{background:#fff;border-left:1px #CCCCFF solid;border-top:1px #CCCCFF solid;border-right:1px #CCCCFF solid;border-bottom:1px #fff solid;}
    .nTab .TabTitle .normal{background:#CCCCFF;border:1px #AACCEE solid;}
    .nTab .TabContent{
    width:auto;background:#fff;
    margin: 0px auto;
    padding:0px 0 0 0;
    border-right:1px #CCCCFF solid;border-left:1px #CCCCFF solid;
    }
    .none {display:none;}
    </style>
    <script src="Tab.js" language="javascript"></script>
    </head>
    <body>
    <br />
    <br />
    <div align="center" style="padding-left:25px;">
    <div class="nTab">
        <!-- 标题开始 -->
        <div class="TabTitle">
          <ul id="myTab1">
            <li class="active" onclick="nTabsTwo(this,0);">0</li>
            <li class="normal" onclick="nTabsTwo(this,1);">1</li>
    <li class="normal" onclick="nTabsTwo(this,2);">2</li>
    <li class="normal" onclick="nTabsTwo(this,3);">3</li>
    <li class="normal" onclick="nTabsTwo(this,4);">4</li>
          </ul>
        </div>
        <!-- 内容开始 -->
        <div class="TabContent">
          <div id="myTab1_C0"> 
    <table width="">000 
    </table>
      </div>
          <div id="myTab1_C1" class="none">
    <table>111
    </table>
      </div>   <div id="myTab1_C2" class="none">
    <table>222
    </table>
      </div>
      <div id="myTab1_C3" class="none">
    <table>333
    </table>
      </div>
      <div id="myTab1_C4" class="none">
    <table>444
    </table>
      </div>
        </div>
    </div>
    </div>
    </body>
    </html>
    --------------------------------------------------------------------------------
    function nTabsTwo(tabTwo, No) {
    if (tabTwo.className == "active") {
    return;
    }
    var tabs = tabTwo.parentNode.id;
    var Lists = document.getElementById(tabs).getElementsByTagName("li");
    for (i = 0; i < Lists.length; i++) {
    if (i == No) {
    tabTwo.className = "active";
    document.getElementById(tabs + "_C" + i).style.display = "block";
    } else {
    Lists[i].className = "normal";
    document.getElementById(tabs + "_C" + i).style.display = "none";
    }
    }
    }
      

  7.   

    网页上常用的选项卡：http://www.easyui.org.cn/MagicSwitch_demo.htmlB/S应用常用的tabStrip http://www.w3cgroup.com/article.asp?id=68