当前位置:编程学习 > JS >>

今天做的一个简单的jquerytabs插件 - jQuery - 。

jQuery.fn.stabs = function(options){
var defaults = {
    navClass                : "nav_class",
    navHoverClass           : "nav_hover_class",
    navSelectedClass        : "nav_selected_class",
   
    contentSelectedClass    : "content_class",
    selected:0
   };
jQuery.extend(defaults,options);

$("div",this).css({clear:"both"}).width("100%").height("100%").hide()
           .eq(defaults.selected)
           .addClass(defaults.contentSelectedClass)
           .show();

$("UL LI",this).addClass(defaults.navClass)
.hover(function(){
    $(this).removeClass(defaults.navClass)
        .addClass(defaults.navHoverClass);
},function(){
    $(this).removeClass(defaults.navHoverClass)
        .addClass(defaults.navClass);
})
.click(function(){
   //alert($(this).parent().find("."+defaults.navSelectedClass+" a").attr("href"));
    $($(this).parent().find("."+defaults.navSelectedClass+" a").attr("href"))
        .removeClass(defaults.contentSelectedClass).hide();
    
   $(this).parent().find("."+defaults.navSelectedClass)
                .removeClass(defaults.navSelectedClass)
                .addClass(defaults.navClass);
   $(this).removeClass(defaults.navHoverClass)
       .addClass(defaults.navSelectedClass);
   $($(this).find("a").attr("href"))
         .addClass(defaults.contentSelectedClass).fadeIn("slow");
      
}).eq(defaults.selected).addClass(defaults.navSelectedClass)
return this;
}

演示级下载地址:http://bbs.cnjquery.com/viewthread.php?tid=42&extra=page%3D1

补充:网页制作,jquery
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,