jQuery tab选项卡

所属分类:媒体-Tabs

 45296  369  查看评论 (7)
分享到微信朋友圈
X
jQuery tab选项卡 ie兼容6

更新时间:2019-10-30 23:42:10

更新说明:调整JQ使tab选项卡可重复使用


js文件

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

调用

$("").click(function(){
     $("").eq($(this).index()).addClass("").siblings().removeClass("");
     $("").hide().eq($(this).index()).show();
})

HTML格式

<div class="">
   <ul class="">
       <li> </li>
       <li> </li>
       <li> </li>
   </ul>
   <div class="">
      <div>
        <ul>
           <li> </li>
           <li> </li>
           <li> </li>
        </ul>
      </div>
      <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
         </ul>
      </div>
      <div>
         <ul>
            <li></li>
            <li></li>
            <li></li>
         </ul>
      </div>
   </div>
</div>
相关插件-Tabs

jQueryBootstrap个性化响应式Tab

功能的话是可以点击切换的,要想有梯形的样子的话只是兼容ie10以上,或者可以使用背景图片达到相应效果
  Tabs
 27123  339

jQuery产品切换tab选项卡

特别好用的tab选项卡,可以轮播多张图片,无多余代码注释全
  Tabs
 37443  361

超酷炫Tab切换及触摸滑动轮播模块效果

Tab切换效果及触摸滑动轮播模块效果同步进行
  Tabs
 37165  517

京东首页的多重tab

京东首页的多重tab
  Tabs
 32213  362

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ricefoto 0
    2019/4/10 18:23:13
    被骗了,不能直接重复使用,一个页面里有用多个tab的话,需要改动
        M_oLs 丶 一个人1
        2019/10/30 16:05:00

        没注意到重复使用的问题,谢谢提醒
        代码如下:

        $(".tab li").click(function() {
            $(this).parent(".tab").children("li").eq($(this).index()).addClass("activ").siblings().removeClass("activ");
            $(this).parent(".tab").next(".tabCon").children("div").hide().eq($(this).index()).show();
        })
    回复
    qzuser 0
    2017/10/5 13:48:58

    冒昧问一下,这个js文件放在哪?

        M_oLs 丶 一个人0
        2017/12/13 16:09:50
        放在你项目的文件夹里面就行啊,用的时候路劲写对调用就好了
    回复
    anhappy 0
    2017/9/3 11:35:51

    这是一个tab栏的demo

    回复
    黑胡椒 0
    2017/3/28 11:08:49
    Jeffrey Chan 0
    2017/2/25 16:54:27

    就喜欢这种简单暴力的

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复