基于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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
js实现tab切换效果
Feb 16 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php判断变量类型常用方法
2012/04/24 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js面向对象的写法
2016/02/19 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python使用webdriver爬取微信公众号
2018/08/31 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python 3 判断2个字典相同
2019/08/06 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
2014年党员公开承诺践诺书
2014/03/25 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
软件售后服务承诺书
2014/05/21 职场文书
医院见习总结
2015/06/24 职场文书