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


Posted in Javascript onFebruary 09, 2010

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); 
        } 
     
    };
Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
node+express制作爬虫教程
Nov 11 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
node.js基础知识小结
Feb 26 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
toString()一个会自动调用的方法
Feb 08 #Javascript
You might like
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
详解jQuery事件
2017/01/13 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
如何在python中使用selenium的示例
2017/12/26 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
怎样声明子类
2013/07/02 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
2014升学宴答谢词
2014/01/26 职场文书
委托书如何写
2014/08/30 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
面试通知邮件
2015/04/20 职场文书
投资合作意向书范本
2015/05/08 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers