bootstrap-tab

bootstrap-tab元件是對原生的bootstrap-tab元件的封裝，方便開發者更方便地使用，主要包含以下功能：

• tab頁初始化
• 關閉tab頁
• 新增tab
• 顯示tab頁
• 獲取tab頁ID

使用

Step1 ：引入樣式

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!--bootstrap-tab樣式-->
 

<link rel="stylesheet" href="../css/bootstrap-tab.css">

Step2：引入指令碼

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-tab.js"></script>

Step3：使用

<div id="tabContainer"></div
 
>

<script>
    $("#tabContainer").tabs({
        data: [{
            id: 'home',
            text: '百度一下',
            url: "tab_first.html",
            closeable: true
        }, {
            id: 'admineap',
            text: 'AdminEAP',
            url: "tab_second.html"
        }, {
            id: 'edit'
 
,
            text: '編輯人員',
            url: "tab_content.html",
            closeable: true
        }],
        showIndex: 1,
        loadAll: false
    })

    $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_content.html'})
</script>

引數和方法說明

引數說明

方法說明

相關連結