`
charrys
  • 浏览: 35214 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

    博客分类：
  • js
百度JavaScriptIEXHTMLHTML 
阅读更多

看了很多别人写的tab切换效果感觉都只是div+js去切换已存在的！有的是添加或删除tab的但是太麻烦了还要改js文件你说是不是很不方便呢，我这个直接修改页面里面的参数就可以了！所以我自己就写了这个功能!谢谢，如果转载请注明出处(http://www.ok22.org)幸凡在线学习网
 你自己可以添加菜单但是要注意的是CreateDiv(tabid,url,name) 第一个tabid不能重复，想添加多少个都行。但是太多了不知道会成什么样你自己看！

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>  
  5.     <style>  
  6.     body,html{height:100%;}   
  7.     #div_pannel{height:800px;}   
  8.     *{margin:0;padding:0;}   
  9.     #div_tab{background:#fff url(http://www.ok22.org/images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;overflow:hidden;}   
  10.     #div_tab li{float:left;text-align:center;position:relative;list-style:none;}       
  11.     #div_tab li{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}   
  12.     #div_tab li span{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}     
  13.     #div_tab li.crent{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}   
  14.     #div_tab li.crent span{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);height:24px;line-height:24px;}    
  15.     #div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}     
  16.     #div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}      
  17.     #div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}   
  18.     #div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}   
  19.     #div_tab li .win_close,#div_tab li.crent .win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(http://www.ok22.org/images/t_delete_ico.gif) no-repeat;}        
  20.     #div_tab li .win_close{background-position:0 -14px;}   
  21.     #div_tab li .win_close:hover{background-position:0 0;}     
  22.     .clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;}    
  23.     *html .clearfix{height:1%;}   
  24.     *+html .clearfix{height:1%;}   
  25.     .clearfix{display:inline-block;}    
  26.     /* Hide from IE Mac */    
  27.     .clearfix {display:block;}    
  28.     </style>  
  29.     <script type="text/javascript">          
  30.         function CreateDiv(tabid, url, name)
       {
       ///如果当前tabid存在直接显示已经打开的tab
       if (document.getElementById("div_" + tabid) == null)
       {
        //创建iframe
        var box = document.createElement("iframe");
        box.id = "div_" + tabid;
        box.src = url;
        box.height = "100%";
        box.frameBorder = 0;
        box.width = "100%";
        document.getElementById("div_pannel").appendChild(box);
      
        //遍历并清除开始存在的tab当前效果并隐藏其显示的div
        var tablist = document.getElementById("div_tab").getElementsByTagName('li');
        var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
        if (tablist.length > 0)
        {
         for (i = 0; i < tablist.length; i++)
         {
          tablist[i].className = "";
          pannellist[i].style.display = "none";
         }
        }
      
        //创建li菜单
        var tab = document.createElement("li");
        tab.className = "crent";
        tab.id = tabid;
        var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";
        tab.innerHTML = litxt;
        document.getElementById("div_tab").appendChild(tab);
       }
       else
       {
        var tablist = document.getElementById("div_tab").getElementsByTagName('li');
        var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
        //alert(tablist.length);
        for (i = 0; i < tablist.length; i++)
        {
         tablist[i].className = "";
         pannellist[i].style.display = "none"
        }
        document.getElementById(tabid).className = 'crent';
        document.getElementById("div_" + tabid).style.display = 'block';
       }
      }
      function RemoveDiv(obj)
       {
       var ob = document.getElementById(obj);
       ob.parentNode.removeChild(ob);
       var obdiv = document.getElementById("div_" + obj);
       obdiv.parentNode.removeChild(obdiv);
       var tablist = document.getElementById("div_tab").getElementsByTagName('li');
       var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
       if (tablist.length > 0)
       {
        tablist[tablist.length - 1].className = 'crent';
        pannellist[tablist.length - 1].style.display = 'block';
       }
      
      }
  31.     </script>  
  32. </head>  
  33. <body>  
  34.     <a href="#" onclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a>  <a href="#" onclick="CreateDiv('lempon','http://www.lempon.com','领跑者建筑网')">领跑者建筑网</a>  <a href="#" onclick="CreateDiv('ok22','http://www.ok22.org','幸凡在线学习网')">幸凡在线学习网</a>  
  35.     <ul class="clearfix" id="div_tab"></ul> <!--菜单列表 -->  
  36.     <div id="div_pannel"></div> <!--新iframe列表-->  
  37. </body>  
  38. </html>  

来自(http://www.ok22.org/art_detail.aspx?id=118)

分享到：
| 8个非常有用的在线工具（对于Web设计和开 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics