<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab组件</title> </head> <link href="https://www.jb51.net/bootstrap/css/bootstrap.min.css" > <link href="https://www.jb51.net/font-awesome/css/font-awesome.min.css" > <link href="https://www.jb51.net/css/bootstrap-tab.css" > <body> <div></div> </body> <script src="https://www.jb51.net/jquery/jquery-1.8.3.min.js"></script> <script src="https://www.jb51.net/bootstrap/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/js/bootstrap-tab.js"></script> <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 }) </script> </html>
通过配置各种参数，看看组件是否满足了预期的要求。
扩展
组件在使用的过程中还会遇到各种问题，或者各种需求，比如新增一个tab页面，比如获取当前tab的ID或index，这是可以在代码中按需扩展。
//新增一个tab页 BaseTab.prototype.addTab=function (obj) { //nav-tab var ul_li = $(this.template.ul_li.format(obj.id, obj.text)); //如果可关闭,插入关闭图标，并绑定关闭事件 if (obj.closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(" "); } this.$element.find(".nav-tabs").append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(obj.id)); this.$element.find(".tab-content").append(div_content_panel); $("#" + obj.id).load(obj.url); this.stateObj[obj.id] = true; if(obj.closeable){ this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () { var href = $(this).parents("a").attr("href").substr(1); $(this).parents("li").remove(); $("#" + href).parent().remove(); }) } this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show"); } //根据id设置活动tab页 BaseTab.prototype.showTab=function (tabId) { this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show"); } //获取当前活动tab页的ID BaseTab.prototype.getCurrentTabId=function () { var href=https://www.jb51.net/this.$element.find(".nav-tabs li.active a").attr("href"); href=https://www.jb51.net/href.substring(1); return href; }
更完善的bootrap-tab版本已经开源，详见我的Github地址:
bootstrap-tab：https://github.com/bill1012/bootstrap-tab
总结