基于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); } };

　　推荐阅读

　　jQuery 添加/移除CSS类实现代码

其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许>>>详细阅读

本文标题：基于Jquery的简单&简陋Tabs插件代码

地址：http://www.17bianji.com/kaifa2/JS/27073.html

1/2 1