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>