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();