基于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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php表单处理操作
2017/11/16 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
商业街策划方案
2014/05/31 职场文书
党员评议自我评价
2015/03/03 职场文书
论文答辩开场白大全
2015/05/27 职场文书
初婚未育证明样本
2015/06/18 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis