基于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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
javascript call和apply方法
Nov 24 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
JavaScript实现矩形块大小任意缩放
Aug 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
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
宾馆总经理岗位职责
2014/02/14 职场文书
社区党建工作方案
2014/06/10 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS