jQuery插件实现非常实用的tab栏切换功能【案例】


Posted in jQuery onFebruary 18, 2019

本文实例讲述了jQuery插件实现tab栏切换功能。分享给大家供大家参考,具体如下:

效果:

jQuery插件实现非常实用的tab栏切换功能【案例】

核心代码:自己写了一个方法,需要用的时候直接调用就可以了.

方法如下:

(function ($) {
  //给$的fn添加方法
  $.fn.tabs=function ( options ) {
    /*   {
            tabHeads:'tab-menu>li',
            tabHeadsClass:'active',
            tabBodys:'tab-main>div',
            tabBodysClass:'selected'
          }
    */
    /**
     * @param options 对象
     * @param options.tabHeads:上面的li标签
     * @param options.tabHeadsClass:li标签需要添加的类名
     * @param options.tabBodys:下面四个内容盒子
     * @param options.tabBodysClass:下面四个内容盒子需要添加的类名
     */
      //将fn这个对象存起来,代码结束的时候让它返回
    var $bigDiv=this;
    //1.给页签们添加点击事件
    $(options.tabHeads).on('click',function ( ) {
      //2.给被点击的li标签添加类,给其它兄弟标签移除这个类
      $(this).addClass(options.tabHeadsClass).siblings().removeClass(options.tabHeadsClass);
      //3.获取当前点击的标签的索引
      var idx=$(this).index();
      //4.从下面div里面找到和idx相同的索引,给它添加类,其它兄弟页面移除这个类
      $(options.tabBodys).eq(idx).addClass(options.tabBodysClass).siblings().removeClass(options.tabBodysClass)
    })
    return $bigDiv;
  }
}(jQuery))

代码结构:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery tab切换</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .tab {
      width: 400px;
      height: 50px;
      background: #ccc;
      margin: 100px auto ;
    }
    .tab-body {
      width: 400px;
      height: 398px;
      border: 1px solid #ccc;
    }
    .tab .item {
      display: none;
      padding-left: 30px;
    }
    .tab-head li {
      float: left;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
    /*让下方的内容显示*/
    .item.selected{
      display: block;
    }
    /*让上方li标签改变颜色*/
    .active{
      background-color: hotpink;
    }
  </style>
</head>
<body>
<div class="tab">
  <ul class="tab-head">
    <li class="active">页签1</li>
    <li >页签2</li>
    <li >页签3</li>
    <li >页签4</li>
  </ul>
  <div class="tab-body">
    <div class="item selected">
      <p>内容1</p>
      <p>内容1</p>
      <p>内容1</p>
      <p>内容1</p>
    </div>
    <div class="item">
      <p>内容2</p>
      <p>内容2</p>
      <p>内容2</p>
      <p>内容2</p>
    </div>
    <div class="item">
      <p>内容3</p>
      <p>内容3</p>
      <p>内容3</p>
      <p>内容3</p>
    </div>
    <div class="item">
      <p>内容4</p>
      <p>内容4</p>
      <p>内容4</p>
      <p>内容4</p>
    </div>
    </div>
  </div>
<!--jq代码实现过程-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--//引入自己写的方法-->
<script src="jQuery-tabs.js"></script>
<script>
  $ ( function () {
    //先自己写一个jQuery-tabs方法(相当于js插件)
    // 调用自己写的方法
    $('#wrapper').tabs(
      {
        tabHeads:'.tab-head>li',
        tabHeadsClass:'active',
        tabBodys:'.tab-body>div',
        tabBodysClass:'selected'
      }
    )
  } )
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
3种平台下安装php4经验点滴
2006/10/09 PHP
很实用的一个完整email发送程序
2006/10/09 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
深入理解Python对Json的解析
2017/02/14 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
django框架创建应用操作示例
2019/09/26 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
软件测试面试题
2015/10/21 面试题
异步传递消息系统的作用
2016/05/01 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
超市国庆节促销方案
2014/02/20 职场文书
节约能源标语
2014/06/17 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
使用python创建股票的时间序列可视化分析
2022/03/03 Python