stevenhwang

收集C#、SQL、JavaScript、HTML、CSS点点滴滴

导航

模拟Tab标签

Posted on 2006-12-25 11:56  stevenhwang  阅读(176)  评论(0)    收藏  举报

源码

<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="test1.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>WebForm2</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="C#" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <style type="text/css">

            #tabsF {
                  float:left;
                  width:100%;
                  background:#efefef;
                  font-size:93%;
                  line-height:normal;
                  border-bottom:1px solid #666;
                  }
            #tabsF ul {
            margin:0;
            padding:10px 10px 0 50px;
            list-style:none;
                  }
            #tabsF li {
                  display:inline;
                  margin:0;
                  padding:0;
                  }
            #tabsF a {
                  float:left;
                  background:url("tableftF.gif") no-repeat left top;
                  margin:0;
                  padding:0 0 0 4px;
                  text-decoration:none;
                  }
            #tabsF a span {
                  float:left;
                  display:block;
                  background:url("tabrightF.gif") no-repeat right top;
                  padding:5px 15px 4px 6px;
                  color:#666;
                  }
            /* Commented Backslash Hack hides rule from IE5-Mac \*/
            #tabsF a span {float:none;}
            /* End IE5-Mac hack */
            #tabsF a:hover span {
                  color:#FFF;
                  }
            #tabsF a:hover {
                  background-position:0% -42px;
                  }
            #tabsF a:hover span {
                  background-position:100% -42px;
                  }

            #divParent div { BACKGROUND-COLOR: #eeeecc; POSITION: absolute; Left: 0px; TOP: 0px; HEIGHT: 200px; width: 100%; visibility: hidden; z-index=2 }
      
            </style>
            <script language="javascript">
            
                  var i = 0;
                                    
                  function adddiv(){
                        i = i+1;
                        liParent.innerHTML += '<li><a href="javascript:display(' + i + ')" title="Link ' + i + '"><span>Link ' + i + '</span></a></li>';
                        divParent.innerHTML += '<div id="div' + i + '">' + i + '</div>';
                  }
                  
                  function display(x){
                        var obj;
                        for(j=i;j>0;j--){
                              obj = eval('div'+j);
                              obj.style.visibility = 'hidden';
                        }
                        
                        obj = eval('div'+x);
                        obj.style.visibility = 'visible';
                  }
                  
            </script>
      </HEAD>
      <body MS_POSITIONING="GridLayout" leftMargin="0" rightMargin="0">
            <input type="button" value="添加TAB" onclick="adddiv()">
            <div id="tabsF">
                  <ul id="liParent">
                  </ul>
            </div>
            <div id="divParent" style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 80px; HEIGHT: 200px; BACKGROUND-COLOR: #eeeecc; z-index=1">
            </div>
      </body>
</HTML>