jquery tabs简易实例

//CSS
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
//前面导入jquery.js和jquery-ui.js
//Javascript代码
var maintab;
$(function(){
maintab =jQuery('#menu_tabs').tabs({
add: function(e, ui) {
// append close thingy
$(ui.tab).parents('li:first')
.append('<span class="ui-tabs-close ui-icon ui-icon-close"></span>')
.find('span.ui-icon-close')
.click(function() {
maintab.tabs('remove', $("#menu_tabs li").index($(this).parents('li:first')));
});
// select just added tab
maintab.tabs('select', "#"+ui.panel.id);
}
});
})

function addTabTest(tableTitle,tabId)
{
if ($("#" + tabId).length > 0)
{
maintab.tabs('select', '#' + tabId);
}
else
{
maintab.tabs('add','#' + tabId, tableTitle);
}
}

<!--html代码 -->
<div class="menu_row bystep" id="menu_tabs">
<ul id="tab_box">
<li title="base"><a href="#base"><%=menuName %></a></li>
</ul>
<div id="base">
Content
</div>
</div>