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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现可以扩展的日历
Dec 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几个数学计算的内部函数学习整理
2011/08/06 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Js代码中的span拼接问题解决
2019/11/22 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python私有属性和方法实例分析
2015/01/15 Python
python getopt详解及简单实例
2016/12/30 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python 内置模块详解
2019/01/01 Python
Python中new方法的详解
2019/01/15 Python
python用requests实现http请求代码实例
2019/10/31 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python是什么 Python的用处
2020/05/26 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
心理健康教育制度
2014/01/27 职场文书
爱国主义演讲稿
2014/05/07 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
介绍信样本
2015/01/31 职场文书
论语读书笔记
2015/06/26 职场文书
工作会议简报
2015/07/20 职场文书
婚宴致辞
2015/07/28 职场文书
python多线程方法详解
2022/01/18 Python