一个简单好用的JS标签(辞职当天帮同事写的东东)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    
<title>Untitled</title>
    
<script type="text/javascript">
// JScript 文件
//
 by XiaoNiu
         Evlon={};
        Evlon.createDelegate 
= function(instance, method)
        {
            
return function()
            {
                method.apply(instance, arguments);
            }
        }
        Evlon.Tab 
= function(tabWnd, elmt, focusClassName, elmtContent, enableHoverSwitch)
        {
            
this.tabWnd = tabWnd;
            
this.elmt = elmt;
            
this.focusClassName = focusClassName;
            
this.content = elmtContent;
            
this.enableHoverSwitch = enableHoverSwitch;
            
this._timer = null;
            
            
            
this.hide = function()
            {
                
var re = new RegExp("\\s+" + focusClassName,"ig");
                
var className = ' ' +  this.elmt.className.toString();
                
this.elmt.className = className.replace(re,'');
                
this.content.style.display = 'none';
            }
            
this.show = function()
            {
                
this.elmt.className += ' ' + focusClassName;
                
this.content.style.display = '';
            }
            
this.menu_onclick = function()
            {
                
this.menu_onmouseout();
                
return this.tabWnd.switchTab(this);
            }
            
            
this.menu_onmouseover = function()
            {
                window.status 
= new Date();
                
this.menu_onmouseout();
                
this._timer = window.setTimeout( Evlon.createDelegate(this.elmt, this.elmt.onclick), 100);
            }
            
this.menu_onmouseout = function()
            {
                
if(this._timer)
                {
                    window.clearTimeout(
this._timer);
                }
            }
            
this.hide();
            
this.elmt.onclick = Evlon.createDelegate(thisthis.menu_onclick)
            
if(this.enableHoverSwitch)
            {
                
this.elmt.onmouseover =  Evlon.createDelegate(thisthis.menu_onmouseover)
                
                
this.elmt.onmouseout = Evlon.createDelegate(thisthis.menu_onmouseout)
            }
        }
        
        Evlon.TabWnd 
= function(idMenu, idDiv, focusClassName, enableHoverSwitch)
        {
            
            
this._menu = document.getElementById(idMenu);
            
this._content = document.getElementById(idDiv);
            
this.tabs = [];
            
this.enableHoverSwitch = false | enableHoverSwitch;
        
            
this.switchTab = function(newTab)
            {
                
this.current.hide();
                
this.current = newTab;
                
this.current.show();
            }
            
            
function getChildren(elmt)
            {
                
var elmts = [];
                
var e = elmt.firstChild;
                
while(e != null)
                {
                    
if(e.nodeType != 3)
                    {
                        elmts.push(e);
                    }
                    
                    e 
= e.nextSibling;
                }
                
return elmts;
            }
            
            
var childrens = getChildren(this._menu);//.childNodes;
            var contents = getChildren(this._content);//.childNodes;
            if(contents.length != childrens.length)
                
throw '菜单和内容数目必须一致!';
            
if(childrens.length > 0)
            {
                
for(var i = 0; i < childrens.length; ++i)
                {
                    
var li = childrens[i];
                    
this.tabs.push(new Evlon.Tab(this, li, focusClassName, contents[i], this.enableHoverSwitch));
                }
                
this.current = this.tabs[0];
                
this.current.show();
            }
        }
    
</script>
</head>

<body>

    
<ul id="ulMenuA" class="main15_3">
        
<li class="btnList2" title="按发布时间显示本类源码">发布时间</li>
        
<li class="btnList2" title="按点击率显示本类源码">点击率</li>
        
<li class="btnList2" title="显示本类推荐源码">推 荐</li>
    
</ul>

    
<div id="divContentA">    
          
       
<div>
        
                
<div class="main15_4 fontGreen">- 02.03 <href="/CV/ROYcms" target="_blank" title="ROYcms (ROYcms内容管理系统) 源码,2009-2-3 8:37:46">ROYcms (ROYcms内容管理系统) 源码</a>
      
      [1710]
</div>
          
                
<div class="main15_4 fontGreen">- 01.12 <href="/CV/TreelayerAjaxNews" target="_blank" title="三层Ajax新闻系统源码,2009-1-12 8:51:39">三层Ajax新闻系统源码</a>
      
      [3978]
</div>
          
                
<div class="main15_4 fontGreen">- 01.07 <href="/CV/Oxite090106" target="_blank" title="Oxite内容管理系统(Build 090106)源码,2009-1-7 9:47:20">Oxite内容管理系统(Build 090106..</a>
      
      [2021]
</div>
          
                
<div class="main15_4 fontGreen">- 01.04 <href="/CV/DeepNews" target="_blank" title="小爱学习(asp.Net)新闻系统 V0.2,2009-1-4 9:00:30">小爱学习(asp.Net)新闻系统 V0.2</a>
      
      [1806]
</div>
          
                
<div class="main15_4 fontGreen">- 12.31 <href="/CV/NetCMS170" target="_blank" title="NetCMSV1.7.0免安装版源码,2008-12-31 16:39:49">NetCMSV1.7.0免安装版源码</a>
      
      [4181]
</div>
          
         
</div>
        
        
<div>
        
                
<div class="main15_4 fontGreen">- 04.01 <href="/CV/xkNews2" target="_blank" title="小孔子新闻系统2.0(全部C#源码版),2007-4-1 8:00:47">小孔子新闻系统2.0(全部C#源码版)</a>
     
      [33667]
</div>
          
                
<div class="main15_4 fontGreen">- 11.30 <href="/CV/CrazyBirdArticle" target="_blank" title="狂鸟文章管理系统源码,2007-11-30 16:54:36">狂鸟文章管理系统源码</a>
     
      [25000]
</div>
          
                
<div class="main15_4 fontGreen">- 05.22 <href="/CV/TianXiaNews" target="_blank" title="天下新闻网程序源码,2007-5-22 9:27:21">天下新闻网程序源码</a>
     
      [20685]
</div>
          
                
<div class="main15_4 fontGreen">- 06.15 <href="/CV/xiaokongzi" target="_blank" title="小孔子内容管理系统完全版源码,2007-6-15 11:19:04">小孔子内容管理系统完全版源码</a>
     
      [19176]
</div>
          
                
<div class="main15_4 fontGreen">- 06.18 <href="/CV/Webfort" target="_blank" title="Webfort网站内容管理系统,2007-6-18 17:11:55">Webfort网站内容管理系统</a>
     
      [18337]
</div>
          
         
</div> 
        
         
<div>
         
                
<div class="main15_4 fontGreen">- 01.07 <href="/CV/Oxite090106" target="_blank" title="Oxite内容管理系统(Build 090106)源码,2009-1-7 9:47:20">Oxite内容管理系统(Build 090106..</a>
     
      [2021]
</div>
          
                
<div class="main15_4 fontGreen">- 12.31 <href="/CV/NetCMS170" target="_blank" title="NetCMSV1.7.0免安装版源码,2008-12-31 16:39:49">NetCMSV1.7.0免安装版源码</a>
     
      [4181]
</div>
          
                
<div class="main15_4 fontGreen">- 12.17 <href="/CV/Oxite" target="_blank" title="Oxite内容管理系统源码,2008-12-17 11:37:22">Oxite内容管理系统源码</a>
     
      [2156]
</div>
          
                
<div class="main15_4 fontGreen">- 12.04 <href="/CV/TengfeiXiaoshuo" target="_blank" title="腾飞在线小说网源码,2008-12-4 10:43:18">腾飞在线小说网源码</a>
     
      [4084]
</div>
          
                
<div class="main15_4 fontGreen">- 10.08 <href="/CV/NanChongRenArticle" target="_blank" title="南充人NET文章系统开源版,2008-10-8 8:17:35">南充人NET文章系统开源版</a>
     
      [6287]
</div>
          
         
</div>
         
    
</div>
  
</div>
  
      
<ul id="ulMenuB" class="main15_3">
        
<li class="btnList2" title="按发布时间显示本类源码">发布时间</li>
        
<li class="btnList2" title="按点击率显示本类源码">点击率</li>
        
<li class="btnList2" title="显示本类推荐源码">推 荐</li>
    
</ul>

    
<div id="divContentB">    
          
       
<div>
        
                
<div class="main15_4 fontGreen">- 02.03 <href="/CV/ROYcms" target="_blank" title="ROYcms (ROYcms内容管理系统) 源码,2009-2-3 8:37:46">ROYcms (ROYcms内容管理系统) 源码</a>
      
      [1710]
</div>
          
                
<div class="main15_4 fontGreen">- 01.12 <href="/CV/TreelayerAjaxNews" target="_blank" title="三层Ajax新闻系统源码,2009-1-12 8:51:39">三层Ajax新闻系统源码</a>
      
      [3978]
</div>
          
                
<div class="main15_4 fontGreen">- 01.07 <href="/CV/Oxite090106" target="_blank" title="Oxite内容管理系统(Build 090106)源码,2009-1-7 9:47:20">Oxite内容管理系统(Build 090106..</a>
      
      [2021]
</div>
          
                
<div class="main15_4 fontGreen">- 01.04 <href="/CV/DeepNews" target="_blank" title="小爱学习(asp.Net)新闻系统 V0.2,2009-1-4 9:00:30">小爱学习(asp.Net)新闻系统 V0.2</a>
      
      [1806]
</div>
          
                
<div class="main15_4 fontGreen">- 12.31 <href="/CV/NetCMS170" target="_blank" title="NetCMSV1.7.0免安装版源码,2008-12-31 16:39:49">NetCMSV1.7.0免安装版源码</a>
      
      [4181]
</div>
          
         
</div>
        
        
<div>
        
                
<div class="main15_4 fontGreen">- 04.01 <href="/CV/xkNews2" target="_blank" title="小孔子新闻系统2.0(全部C#源码版),2007-4-1 8:00:47">小孔子新闻系统2.0(全部C#源码版)</a>
     
      [33667]
</div>
          
                
<div class="main15_4 fontGreen">- 11.30 <href="/CV/CrazyBirdArticle" target="_blank" title="狂鸟文章管理系统源码,2007-11-30 16:54:36">狂鸟文章管理系统源码</a>
     
      [25000]
</div>
          
                
<div class="main15_4 fontGreen">- 05.22 <href="/CV/TianXiaNews" target="_blank" title="天下新闻网程序源码,2007-5-22 9:27:21">天下新闻网程序源码</a>
     
      [20685]
</div>
          
                
<div class="main15_4 fontGreen">- 06.15 <href="/CV/xiaokongzi" target="_blank" title="小孔子内容管理系统完全版源码,2007-6-15 11:19:04">小孔子内容管理系统完全版源码</a>
     
      [19176]
</div>
          
                
<div class="main15_4 fontGreen">- 06.18 <href="/CV/Webfort" target="_blank" title="Webfort网站内容管理系统,2007-6-18 17:11:55">Webfort网站内容管理系统</a>
     
      [18337]
</div>
          
         
</div> 
        
         
<div>
         
                
<div class="main15_4 fontGreen">- 01.07 <href="/CV/Oxite090106" target="_blank" title="Oxite内容管理系统(Build 090106)源码,2009-1-7 9:47:20">Oxite内容管理系统(Build 090106..</a>
     
      [2021]
</div>
          
                
<div class="main15_4 fontGreen">- 12.31 <href="/CV/NetCMS170" target="_blank" title="NetCMSV1.7.0免安装版源码,2008-12-31 16:39:49">NetCMSV1.7.0免安装版源码</a>
     
      [4181]
</div>
          
                
<div class="main15_4 fontGreen">- 12.17 <href="/CV/Oxite" target="_blank" title="Oxite内容管理系统源码,2008-12-17 11:37:22">Oxite内容管理系统源码</a>
     
      [2156]
</div>
          
                
<div class="main15_4 fontGreen">- 12.04 <href="/CV/TengfeiXiaoshuo" target="_blank" title="腾飞在线小说网源码,2008-12-4 10:43:18">腾飞在线小说网源码</a>
     
      [4084]
</div>
          
                
<div class="main15_4 fontGreen">- 10.08 <href="/CV/NanChongRenArticle" target="_blank" title="南充人NET文章系统开源版,2008-10-8 8:17:35">南充人NET文章系统开源版</a>
     
      [6287]
</div>
          
         
</div>
         
    
</div>
  
</div>

  
<script type="text/javascript">
  
    
var tab = new Evlon.TabWnd("ulMenuA","divContentA","focus",true);
    
var tab = new Evlon.TabWnd("ulMenuB","divContentB","focus",false);
    
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/evlon/p/1089568.html