博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

tab 切换函数

Posted on 2009-06-04 09:09  linFen  阅读(920)  评论(0编辑  收藏  举报

$(document).ready(
function(){
    
//标记当前函数
    function cur(ele,currentClass,tag){
        ele
= $(ele)? $(ele):ele;
        
if(!tag){
            ele.addClass(currentClass).siblings().removeClass(currentClass);
            }
else{
                ele.addClass(currentClass).siblings(tag).removeClass(currentClass);
                }
        }
    
//Navgation Switch 用法实例:
    $("#nav").find("li").mouseover(function(){cur(this,"cur")})
    
//Offcial News Switch 用法实例:
    $("#ofcnews").find("div").click(function(){cur(this,"cur")})
    
//选项卡函数
    function tab(id_tab,tag_tab,id_con,tag_con,act){
    $(id_tab).find(tag_tab).each(
function(i){
    $(id_tab).find(tag_tab).eq(i).bind(act,
function(){
            cur(
this,"cur");
            $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
            }        
        )                                      
    })    
    }
    
/*Ranking Switch 用法实例*/
    tab(
"#ranktab","li","#rankcon","div","click");
    
/*BBS Switch 用法实例*/
    tab(
"#bbstab","li","#bbscon","div","click");    
    })

 

函数也比较简单 ,一看就明白了,只要理清了这几个参数,自己去套就行了。 最后发个DEMO吧:

点击这里查看在线演示   

其中 导航和 官方新闻 用了 cur 标记当前函数

论坛和积分榜用了tab 切换函数

来自:http://www.cnblogs.com/trance/archive/2009/05/13/1456131.html