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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
PHP htmlentities()函数用法讲解
2019/02/25 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python实现学校管理系统
2018/01/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python用Jira库来操作Jira
2020/12/28 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
体育学院毕业生自荐信
2013/11/03 职场文书
高中体育教学反思
2014/01/24 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
村长贪污检举信
2014/04/04 职场文书
元旦晚会开场白
2015/05/29 职场文书
python中pycryto实现数据加密
2022/04/29 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
mysqldump进行数据备份详解
2022/07/15 MySQL