随光标移动，控制样式以及内容显示

/**
* Tab切换类库
*/

TabClass = function (config)

{
    this.tabName    = config.tabName;    //Tab的名称前缀
    this.cntName    = config.cntName;    //Tab的内容前缀
    this.number        = config.number;    //Tab的个数    
    
    this.tabNameList = config.tabNameList;//tabs列表
    this.cntNameList = config.cntNameList;//tabs内容列表
    
    this.tabNameListId = config.tabNameListId;//tabs的父层id
    this.tabNameTagName = config.tabNameTagName;//tabs标签列表    
    this.cntNameTagName = config.cntNameTagName;//tabs内容标签名称    
    
    if(config.openEvent)
        this.openEvent=config.openEvent;//是否开启自动添加事件功能
    else
        this.openEvent=false;
    this.eventName=config.eventName;//事件名称
    this.eventFunction=config.eventFunction;//事件函数名称
    
    this.tabShowCls = config.tabShowCls;//活动的Tab的Class
    if (config.tabHiddenCls)
        this.tabHiddenCls = config.tabHiddenCls;//非活动的Tab的Class
    else
        this.tabHiddenCls = '';
    if (config.cntShowCss)
        this.cntShowCss    = config.cntShowCss;//非活动的Tab的内容的样式
    else
        this.cntShowCss    = 'block';        
    
    var FunctionName=this.eventFunction;
    var eName=this.eventName;

    var tnl,cnl;   

    this.ShowByTagName = function(){//根据tagName 控制显示 适用于的样式合理（该层只有要控制的标签）的列表    使用于绑定
        tnl=$('#'+this.tabNameListId+" "+this.tabNameTagName);
        cnl=$('#'+this.tabNameListId+" "+this.cntNameTagName);                                
        for (var i=0; i<tnl.length; i++) {
            if (tnl[i].id!=this.tabName) {
                $('#'+tnl[i].id).removeClass(this.tabShowCls);//删除class
                if (this.tabHiddenCls)
                    $('#'+tnl[i].id).addClass(this.tabHiddenCls);
                if(this.cntName)
                    $('#'+cnl[i].id).css('display', 'none');//隐藏内容层
            }
            else {
                if (this.tabHiddenCls)
                    $('#'+tnl[i].id).removeClass(this.tabHiddenCls);               
                $('#'+tnl[i].id).addClass(this.tabShowCls);//添加class
                if(this.cntName)
                    $('#'+cnl[i].id).css('display', this.cntShowCss);//显示内容层
            }
            if(this.openEvent){ //如果设置开启添加事件                                                               
                (function(){//使用闭包动态添加事件
                    var obj=tnl[i];                     
                    obj[eName]=function(e){                        
                        eval(FunctionName+"('"+obj.id+"','"+obj.id+"',false);");                                            
                    };                                       
                })();                                                                                                             
            }
        }        
    }
}

//页面代码

<div id="ranks">//这里的id ：this.tabNameListId = config.tabNameListId;//tabs的父层id

<ol class="mc7 hotbbstalknav">

                        <li class="hotbbstalknavsel" id="rank_1">日排行</li>//这里的 id：this.tabName    = config.tabName;    //Tab的名称前缀
                        <li id="rank_2">周排行</li>
                        <li id="rank_3">月排行</li>

                    </ol>

<ul class="mc7 grouplist hotbbstalk" id="hotbbstalk_1"> //这里的id： this.cntName    = config.cntName;    //Tab的内容前缀

 

 </ul>

 

<ul class="mc7 grouplist hotbbstalk" id="hotbbstalk_2" style="display: none">

 </ul>

<ul class="mc7 grouplist hotbbstalk" id="hotbbstalk_3" style="display: none">

 </ul>

<script type="text/javascript">
                     function show(tabname,cntname,openEvent,i){           
                            function config(){
                                 this.tabName=tabname;this.cntName=cntname;//要显示的                                                  
                                 
                                 this.tabNameTagName="ol li";this.cntNameTagName="ul";//两个标签
                                 
                                 this.tabShowCls="hotbbstalknavsel";//要控制的class  
                                 
                                 this.openEvent=openEvent;this.eventName="onmouseover";this.eventFunction="show";//启动添加事件                         
                            }
                            var cf=new config();
                            var tc=new TabClass(cf);            
                            tc.ShowByTagName();               
                    }
                    show('rank_1','hotbbstalk_1',true); //第一次执行启动添加事件                 
                   
                    </script>

 </div>

 演示地址：http://www.ishangdu.com/city/Community/Default.aspx

右下角的社区热帖，日周月排行

注：ie6 循环添加事件不能用 只能手动添加