欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap插件bootstrap-tab

程序员文章站 2022-03-04 17:21:39
...

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Tab组件</title>
</head>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../bootstrap-3.3.7/font-awesome.css"> -->
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-tab.css">

<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-tab.js"></script>
<body>
<div id="tabContainer"></div>
</body>

<script type="text/javascript">
    $("#tabContainer").tabs({
        data: [{
            id: 'home',
            text: '百度一下',
            url: "tab_first.html",
            closeable: true
        }, {
            id: 'admineap',
            text: 'AdminEAP',
            url: "tab_first.html"
        }],
        showIndex: 0,
        loadAll: false
    });

    $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_first.html'})
</script>
</html>
相关标签: bootstrap