基于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 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
vue-swiper的使用教程
Aug 30 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Openlayers测量距离与面积的实现方法
Sep 25 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jquery each()源代码
2011/02/14 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
python安装与使用redis的方法
2016/04/19 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python实现五子棋小游戏
2020/03/25 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
python IP地址转整数
2020/11/20 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
学习雷锋标语
2014/06/25 职场文书
同学聚会通知短信
2015/04/20 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
Redis可视化客户端小结
2021/06/10 Redis
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫