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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP类的特性实例分析
2016/09/28 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JS 树形递归实例代码
2010/05/18 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python3如何将docx转换成pdf文件
2018/03/23 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
python爬虫工具例举说明
2020/11/30 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
大四毕业生自荐书
2014/07/05 职场文书
民事诉讼代理词
2015/05/25 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
聊聊JS ES6中的解构
2021/04/29 Javascript
Python深度学习之Pytorch初步使用
2021/05/20 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android