日期:2014-05-18  浏览次数:20450 次

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

------解决方案--------------------
用Html写就可以了.
参考:
HTML code


 <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.createEl