基于bootstrap多功能选项卡

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

 3675  34  查看评论 (5)
基于bootstrap多功能选项卡 ie兼容8

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();
相关插件-其他导航

jQuery展开左右侧栏目插件PageSlide

jQuery展开左右侧栏目插件PageSlide
  其他导航
 21894  74

流程图工具

简单易用的流程图设计工具
  其他导航
 23676  210

H5响应式菜单导航

H5页面自适应,响应式菜单导航
  其他导航
 1333  4

侧面板滑块插件jquery-panelslider

jquery滑动面板,jQuery插件
  其他导航
 22755  88

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

    加油,或许不能坚持 0
    2017/8/15 15:57:42

    点击右箭头把当前都删掉在点左边就不出来了

    回复
    让时光有力量、?? 0
    2017/8/6 20:25:18
    869123771 0
    2017/8/5 15:21:58
    在子tab里面增加  删除父tab 都不起作用,,望楼主看下.
        8691237710
        2017/8/5 16:20:07
        说错了 可以嘿嘿
    回复
    ~飘雨 0
    2017/6/25 21:59:30
取消回复