jQuery Tabs滑动选项卡

所属分类:媒体-Tabs

 26124  303  查看评论 (5)
分享到微信朋友圈
X
jQuery Tabs滑动选项卡 ie兼容6

一款slide效果的选项卡,依赖jquery

使用方法

需要调用的两个文件jquery-1.10.2.js,mt-tabpage.js

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/mt-tabpage.js"></script>

样式代码也是必须的,请参考代码中的style部分

html代码

<div class="mt-tabpage" js-tab="1">
    <div class="mt-tabpage-title">
        <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">公告</a>
        <a href="javascript:;" class="mt-tabpage-item">决定</a>
        <a href="javascript:;" class="mt-tabpage-item">会议</a>
    </div>
    <div class="mt-tabpage-count">
        <ul class="mt-tabpage-cont__wrap">
            <li class="mt-tabpage-item">Cont1</li>
            <li class="mt-tabpage-item">Cont2</li>
            <li class="mt-tabpage-item">Cont3</li>
        </ul>
    </div>
</div>

js

$('[js-tab=2]').tab({
      curDisplay: 1,
      changeMethod: 'horizontal'
});
相关插件-Tabs

jQuery tab产品标签切换

jQuery常用网站产品tab标签切换效果
  Tabs
 20357  243

移动端tab切换

依赖jQuery tab切换,请在移动端预览查看最佳效果,支持移动端滑动切换
  Tabs
 36237  334

京东首页的多重tab

京东首页的多重tab
  Tabs
 32683  362

适合手机、pad等移动终端的tab响应式切换效果

适合手机、pad等移动终端的tab响应式切换效果
  Tabs
 59962  507

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

    李成思 0
    2021/5/12 12:02:12
    热情难料 0
    2020/1/6 14:11:22
    cuitch 0
    2019/7/23 13:44:09
    简约实用 很不错! 回复
    庸 人 自 扰 0
    2019/6/20 14:37:02
    这个用c3写 我觉得比插件更友好一些吧 回复
    0
    2019/6/14 15:04:49
    问一下 调用的其他插件如何在发布代码中调用 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复