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

2019-11-19 12:07:38

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>www.VeVB.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.VeVB.COm/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

上一篇：详解ES7 Decorator 入门解析

下一篇：详解关于微信setData回调函数中的坑