源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于Jquery的简单&简陋Tabs插件代码

  • 时间:2022-12-18 10:31 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于Jquery的简单&简陋Tabs插件代码
[b]HTML代码 [/b]
[u]复制代码[/u] 代码如下:
<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>
[b]Jquery [/b]
[u]复制代码[/u] 代码如下:
$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});
jquery.PPXTabs.js代码
[u]复制代码[/u] 代码如下:
/*    ================================================================ *    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);         }          };
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部