I found myself in the position of needing jQuery UI’s tabs plugin to have the option of being renamed while still maintaining the tab. I came up with this function to easily rename a tab by passing the tab’s id selector and desired value.
function renameTab(selector, value) { $('a[href="' + selector + '"').text(value); }
Keep in mind you should be using jQuery UI’s example of adding tabs template
<div id="tabs"> <ul> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> </ul> </div>
This will work even if you are calling the href to load remote content via AJAX since the tabs use a unique identifier for those (i.e. #ui-tabs-1, #ui-tabs-2, etc.).
Simply rename “Tab 1″ to “Tab 1337″
renameTab("#tab-1", "Tab 1337");
Any questions/insight feel free to reply.