基于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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
js获取内联样式的方法
Jan 27 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
js前端设计模式优化50%表单校验代码示例
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
ftp类(example.php)
2006/10/09 PHP
各种快递查询--Api接口
2016/04/26 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
社区党总支书记先进事迹材料
2014/01/24 职场文书
超市开学活动方案
2014/03/01 职场文书
教师节促销方案
2014/03/22 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
总结Python常用的魔法方法
2021/05/25 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
php双向队列实例讲解
2021/11/17 PHP