1.为标签页添加关闭按钮，单击该按钮移除标签页，添加双击标签页移除。其中按钮图标使用了font-awesome字体图标。
先上效果图：
样式如下：
#nav-tabs ul li a .tab-close { float: right; /* margin: 0.4em 0.2em 0 0; */margin-left: 10px;margin-right: -10px;margin-top: -22px;padding: 2px;cursor: pointer; }#nav-tabs ul li a .tab-close:hover, #nav-tabs ul li a .tab-close:focus{ color: #EE2C2C;}
布局：
<div id="nav-tabs"><div class="tab-wrap"><ul><li><a href="#tabs-0"><span>首页</span><span class='ace-icon fa fa-times tab-close'></span></a> </li></ul></div><div class="page-content"><!-- PAGE CONTENT BEGINS --><div class="row"><div id="tab-content" class="col-xs-12"><div id="tabs-0">首页</div></div></div><!-- PAGE CONTENT ENDS --></div><!-- /.page-content --></div>
jQuery事件：
var tabs;jQuery(function($){//jquery-ui tab.js初始化tab导航tabs = $( "#nav-tabs" ).tabs({beforeLoad: function( event, ui ) {ui.jqXHR.error(function() {ui.panel.html("无法加载改页面，我们会尽快修复这个问题。" );});}}); // 关闭图标：当点击时移除标签页tabs.delegate( "span.tab-close", "click", function() {var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );$( "#" + panelId ).remove();tabs.tabs( "refresh" );});tabs.delegate( "li", "dblclick", function() {if($(this).index() != 0){var panelId = $(this).remove().attr( "aria-controls" );$( "#" + panelId ).remove();tabs.tabs( "refresh" );}});});
2.动态创建Tab标签页，创建完成后打开该标签页
var tab_counter = 2;//创建标签页function createTab(title,uri) {var tabTemplate = "<li><a href='@{href}'><span>@{title}</span><span class='ace-icon fa fa-times tab-close'></span></a></li>";id = "tabs-" + tab_counter++,li = $(tabTemplate.replace( /@\{href\}/g, "#" + id ).replace( /@\{title\}/g, title )),tabs.find( ".ui-tabs-nav" ).append( li );tabContentHtml = "测试";tabs.find("#tab-content").append( "<div id='" + id + "'>" + tabContentHtml + "</div>" );tabs.tabs( "refresh" );tabs.find("[href='#" + id + "']").trigger( "click" );}
查看了jqueryui tabs官方文档，由于是全英文的，而且也没有直观的解释，没能找到手动切换Tab标签页的方式，看到了stackoverflow上有人发的文章，我尝试他的方法，但不奏效，最后只能委曲求全，用了tabs.find(“[href=’#” + id + “’]”).trigger( “click” );这种方式，模拟触发click事件……╮(╯▽╰)╭
3.避免重复创建相同的标签页，实现点击相同的菜单，重新打开已经创建好的标签页。只需修改createTab函数即可：
//创建标签页function createTab(title,uri) {if(tabs.find("#tab-" + title).length == 0){ //如果未找到该标签页则创建var tabTemplate = "<li id='tab-@{title}'><a href='@{href}'><span>@{title}</span><span class='ace-icon fa fa-times tab-close'></span></a></li>";id = "tabs-" + tab_counter++,li = $(tabTemplate.replace( /@\{href\}/g, "#" + id ).replace( /@\{title\}/g, title )),tabs.find( ".ui-tabs-nav" ).append( li );tabContentHtml = "测试";tabs.find("#tab-content").append( "<div id='" + id + "'>" + tabContentHtml + "</div>" );tabs.tabs( "refresh" );tabs.find("[href='#" + id + "']").trigger( "click" );}else{ //找到该标签页，说明其已创建，则打开tabs.find("#tab-" + title + " > a").trigger( "click" );}}
