UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

基于bootstrap多功能选项卡

所属分类：导航-其他导航

 55558  434  查看评论 (25)
分享到微信朋友圈
X
基于bootstrap多功能选项卡 ie兼容8
 查看演示  website  立即下载

nth-tabs是什么？

基于bootstrap的多功能选项卡插件

其他依赖：

滚动条 jquery.scrollbar

图标 font-awesome

使用说明：

CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" rel="stylesheet">
<link href="css/nth.tabs.min.css" rel="stylesheet">

JS

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<script src="js/nth.tabs.min.js"></script>

HTML

<div class="nth-tabs" id="custom-id"></div>

初始化

nthTabs = $("#custom-id").nthTabs();

添加一个选项卡

nthTabs.addTab({
 id:'a',
 title:'孙悟空',
 content:'看我七十二变',
});

添加一个不可关闭的选项卡

nthTabs.addTab({
  id:'a',
  title:'孙悟空',
  content:'看我七十二变',
  allowClose:false,
});

添加一个活动状态的选项卡

 nthTabs.addTab({
        id:'a',
        title:'孙悟空',
        content:'看我七十二变',
        active:true,
});

添加多个选项卡

 

nthTabs.addTab({
        id:'a',
        title:'孙悟空',
        content:'看我七十二变',
}).addTab({
        id:'b',
        title:'孙悟空二号',
        content:'看我七十三变',
});

删除一个选项卡

nthTabs.delTab('id');

删除其他选项卡

nthTabs.delOtherTab();

删除所有选项卡

nthTabs.delAllTab();

切换到指定选项卡

nthTabs.setActTab(id);

定位到当前选项卡

nthTabs.locationTab();

左滑动

$('.roll-nav-left').click();

右滑动

$('.roll-nav-right').click();

获取左右滑动步值

nthTabs.getMarginStep();

获取当前选项卡ID

nthTabs.getActiveId();

获取所有选项卡宽度

nthTabs.getAllTabWidth();

获取所有选项卡

nthTabs.nthTabs.getTabList();
相关插件-其他导航
查看更多

手机移动端可滚动的导航代码

 这是一款基于移动端滑动导航
  其他导航
 59243  483

H5响应式菜单导航

 H5页面自适应，响应式菜单导航
  其他导航
 50079  317

jQuery圆形气泡导航

 jQuery圆形气泡导航,ie6下运行也ok。
  其他导航
 41782  487

纯CSS3多级环形导航菜单（原创）

 使用纯css3开发的多级环绕导航菜单，扩展方便。
  其他导航
 52835  523

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

    梦里花落 0
    2020/7/9 11:41:12
    页面初始化加载，标签总是滑动到最后一个，怎么解决 回复
    毛巾纺织ERP生产管理系统 0
    2019/11/23 16:39:54
    font-awesome.min.css 引用网络路径就正常，引用本地文件路径左右小图标不现实，请问怎么回事？
        毛巾纺织ERP生产管理系统0
        2019/11/23 16:49:33
        已经解决了
    回复
    毛巾纺织ERP生产管理系统 0
    2019/11/23 13:58:50
    bootstrap.min.css和本地样式冲突，页面菜单乱了，怎么处理的？
        西瓜0
        2019/11/23 14:41:11
        这个需要修改本地样式，修改bootstrap会影响后期在此调用开发，所以修改本地CSS样式比较好
        毛巾纺织ERP生产管理系统0
        2019/11/23 14:48:11
        已经解决了， active:true，为什么我设置了但每次新建一个新的选项卡的页面都没有默认切到新的页面，要特意鼠标点击一下才行
        毛巾纺织ERP生产管理系统0
        2019/11/23 15:05:13
        已经解决了
    回复
    ThreeLambs 0
    2019/8/22 8:38:05
    不兼容bootstrap4 啊！ 回复
    ザ╃ 小嘿嘿 0
    2019/1/25 16:25:41
    楼主，点击关闭所有不要关闭第一个要怎么写 回复
    MISS楠瓜先生 0
    2018/11/21 9:42:16
    点右边小三角，出来下拉菜单，点滚动条，鼠标一松开菜单就消失了，只能用滚轮操作滚动条，不能用鼠标拖动
        nethuige0
        2018/12/29 10:01:58
        已经修复，感谢反馈！
    回复
    ＆$#@*^!# 0
    2018/11/20 17:45:15
    打开多个白骨精，可以默认第二以后个是切换吗
        nethuige0
        2018/12/29 10:03:08
        请移步最新版
    回复
    小笋 0
    2018/8/12 11:34:11
    太棒了，感谢作者开源，怎么给作者打赏啊
    回复
    一只特例独行的猪 0
    2018/3/16 11:19:23
    tab里面如何嵌入页面 回复
    你可别说话了.? 0
    2018/1/23 10:53:21

    添加新的选项卡的时候，上面nav选项卡名字没有跟随动态显示 内容也没有及时变化

        nethuige0
        2018/9/14 11:22:10
        感谢反馈！v2.0版本已经更新，https://github.com/nethuige/nth-tabs
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复