怎样实现动态增减标签的标签页？

小弟需要设计一个网页，实现标签页，但要根据点击的新页面增减标签，酷似一些浏览器，页面都载入的标签中，
现在没什么进展，不知道用什么控件还是直接用html写，请高手指教。

解决方案 »

  1.   

    类似firefox那样的标签也吗？TabControl控件
      

  2.   

    用Html写就可以了.
    参考:
     <style>
            .tab
            {
                width:100px;
                padding-left:22px;
                 height:17px;
               
                padding-top:5px;
                
                border-left:none;
                cursor:pointer;
                float:right;
                background-image:url(../images/tab.gif);
                background-repeat:no-repeat;
                
            }
              .tabsel
            {
                width:100px;
                padding-left:22px;
                height:17px;
               
                padding-top:5px;
                
                border-left:none;
                cursor:pointer;
                float:right;
                background-image:url(../images/tabsel.gif);
                background-repeat:no-repeat;
                         }
            .closeimg
            {
                float:right;
                padding-right:10px;
                
            }
            .tabtext
            {
                text-align:center;
                float:left;
                padding-top:3px;
                padding-left:3px;
                padding-bottom:1px;
                
                 
            }
        </style>
    </head>
    <body>
                        <div class="title">
                <br />
                <div style="text-align: center;" id="divPanel">
                    <div class="tabsel" id="divTable" onclick="javascript:ShowTab(this);">
                        <div class="tabtext">
                            默认页</div>
                        <img class="closeimg" src="../images/tabclosesel.jpg" onclick="javascript:CloseTab(this)" />
                    </div>
                </div>
            </div>
            <div id="divFrames" style="width: 100%; border-top: solid 0px red">
                <iframe id="iframeDefault" src="welcome.htm" width="100%" name="main"></iframe>
            </div>
                </body>
    </html><script type="text/javascript">
       SetIframeHeight();
      function SetIframeHeight()
      {
         
         document.getElementById("iframeDefault").height = document.documentElement.clientHeight-82;
         
         document.getElementById("iframeDefault").contentWindow.onload = function()
         {
            //document.getElementById("divTable").innerHTML = document.getElementById("iframeDefault").contentWindow.document.title;
         }
      }
      
      window.onresize=function()
      {
      
       // SetIframeHeight();
       
       }
       
       
       function Navigage(url,title)
       {
          
            //$("divTable").innerHTML = title;
             
            SetDivHtml($("divTable"),title);
         //$("iframeDefault").contentWindow.location = url;
            $("iframeDefault").src = url;
            ShowTab($("divTable"));
       //  window.open(url,"main","",true);
        // alert( $("iframeDefault").contentWindow.location);
       }
       
       var aryTab = new Array();
       aryTab[0] = $("divTable");
       aryTab[0].iframe = $("iframeDefault");
       
       var CurTab = aryTab[0];
       
       var gOpenedUrl = new Object();
       
       function NewTab(url,title)
       {    
            
           if(gOpenedUrl[url] != null)
           {
                 
                //alert("该页面已经打开!");
                gOpenedUrl[url].click();//选中
                return false;
           }
            
           var div = document.createElement("DIV");
           div.className = "tabsel";
           
           var divText = document.createElement("DIV");
           divText.className = "tabtext";
           div.appendChild(divText);
           
           var img = document.createElement("IMG");
           img.src = "../images/tabclosesel.jpg";
           img.className = "closeimg";
           img.onclick = function()
           {
                CloseTab(img);
           }
           div.appendChild(img);
           
           $("divPanel").appendChild(div);
           
           var iframe = document.createElement("IFRAME");
           iframe.src  = url;
           iframe.width = "100%"
           iframe.height = document.documentElement.clientHeight-42;
           $("divFrames").appendChild(iframe);
           if(CurTab !=null)
           {
              CurTab.iframe.style.display = "none";
              CurTab.getElementsByTagName("img")[0].src = "../images/tabclose.jpg";
              CurTab.className = "tab";
           }
           
           div.iframe = iframe;
           aryTab[aryTab.length] = div;
           
           
           CurTab = div;
           SetDivHtml(div,title)
           div.onclick = function()
           {
             ShowTab(div);
           }
           gOpenedUrl[url] = div;
           div.url = url;
           
       }
       
       function ShowTab(divTab)
       {
           
           if(CurTab !=null)
           {
              CurTab.iframe.style.display = "none";
              CurTab.getElementsByTagName("img")[0].src = "../images/tabclose.jpg";
              CurTab.className = "tab";
           }
           divTab.iframe.style.display = "";
           divTab.className = "tabsel";
           divTab.getElementsByTagName("img")[0].src = "../images/tabclosesel.jpg";
           CurTab = divTab;
        
       }
       
       function SetDivHtml(div,HTML)
       {
           var txtDiv = div.childNodes[0];
               txtDiv.innerHTML = HTML;
       }
       
       function CloseTab(img)
       {
            
            
            var tab = img.parentNode;
            var preTab =  tab.previousSibling;
            
            if(preTab ==null) return;
            if(preTab!=null && preTab.tagName ==null)
            {
                preTab =  preTab.previousSibling;
                
            }
            var frm = tab.iframe;
            frm.parentNode.removeChild(frm);
            tab.parentNode.removeChild(tab);
            delete gOpenedUrl[tab.url];
            if(document.all)
            {
                preTab.click();
            }
            else{
                 var evt = document.createEvent("MouseEvents");
                 evt.initEvent("click", true, true);
                 preTab.dispatchEvent(evt);
        }   }
       function $(id)
    {
     return document.getElementById(id);
    }
       
    </script>