基于Jquery的简单&简陋Tabs插件代码 |
本文标签:Jquery,Tabs插件 HTML代码 复制代码 代码如下: <div class="tab"> <li class="selected" >1</li> <li class="hover">2</li> <li class="hover">3</li> </div> <div class="tab_box"> <div class="newslist">第一个</div> <div class="newslist">第二个</div> <div class="newslist">第三个</div> </div> Jquery 复制代码 代码如下: $().PPXTabs({ nav:.tab li,nav_txt:.tab_box div,selectedClass:selected,hoverClass:hover}); jquery.PPXTabs.js代码 复制代码 代码如下: /* ================================================================ * Copyright 2009 PPX * 邮箱: Mr.cuix@Gmail.com * 原始版本作者:PPX 创建时间:2010-2-8 10:20 * ================================================================ * 参数说明 * <param name="nav">导航列</param> * <param name="nav_txt">导航内容</param> * <param name="selectedClass">选中时的样式</param> * <param name="hoverClass">经过时的样式</param> * * 默认为 * $().PPXTabs({ nav:.news_title1 li, nav_txt:.news_list_box div, selectedClass:tab_1_A, hoverClass:tab_1_B }); =================================== Demo ----- <div class="tab"> <li class="selected" >1</li> <li class="hover">2</li> <li class="hover">3</li> </div> <div class="tab_box"> <div class="newslist">第一个</div> <div class="newslist">第二个</div> <div class="newslist">第三个</div> </div> =================================== css ----- $().PPXTabs({ nav:.tab li,nav_txt:.tab_box div,selectedClass:selected,hoverClass:hover}); */ $.fn.PPXTabs=function(options){ //默认配置 var settings={ nav:.news_title1 li, nav_txt:.news_list_box div, selectedClass:tab_1_A, hoverClass:tab_1_B }; //主函数 $(function(){ var tab_menu_li = $(settings.nav); $(settings.nav_txt+:gt(0)).hide(); tab_menu_li.hover(function(){ //鼠标移入 $(this).removeClass(settings.hoverClass); $(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass); $(this).siblings("li").addClass(settings.hoverClass); $(this).addClass(settings.selectedClass); var index = tab_menu_li.index(this); $(settings.nav_txt).eq(index).show().siblings().hide(); },function(){ //鼠标移出 $(this).removeClass(settings.selectedClass); $(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass); $(this).siblings("li").addClass(settings.hoverClass); $(this).addClass(settings.selectedClass); }); }); if(options){ $.extend(settings,options); } }; |