var addTabs = function (options) { url = window.location.protocol + '//' + window.location.host; options.url = url + options.url; id = "tab_" + options.id; $(".active").removeClass("active"); (!$("#" + id)[0]) { //固定TAB中IFRAME高度 mainHeight = $(document.body).height() - 90; //创建新TAB的title title = '<li role="presentation"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + options.title; (options.close) { title += ' <i tabclose="' + id + '"></i>'; } title += '</a></li>'; (options.content) { content = '<div role="tabpanel">' + options.content + '</div>'; } else {//没有内容，使用IFRAME打开链接 content = '<div role="tabpanel"><iframe src="' + options.url + '" frameborder="no" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>'; } //加入TABS $(".nav-tabs").append(title); $(".tab-content").append(content); } //激活TAB $("#tab_" + id).addClass('active'); $("#" + id).addClass("active"); }; var closeTab = function (id) { ($("li.active").attr('id') == "tab_" + id) { $("#tab_" + id).prev().addClass('active'); $("#" + id).prev().addClass('active'); } //关闭TAB $("#tab_" + id).remove(); $("#" + id).remove(); }; $(function () { mainHeight = $(document.body).height() - 45; $('.main-left,.main-right').height(mainHeight); $("[addtabs]").click(function () { addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true }); }); $(".nav-tabs").on("click", "[tabclose]", function (e) { id = $(this).attr("tabclose"); closeTab(id); }); });

那么，在什么时候调用Addtabs方法呢？答案是注册菜单click事件的时候，这部分代码在前面sidebar-menu组件封装的时候就有，可以看看上面。