Feb 19

jQuery UI Rename Tabs

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">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>

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.

1 comment

  1. Richard Toohey

    Only worked for me in FF if I changed …

    $(‘a[href=”‘ + selector + ‘”‘).text(value);

    … to …

    $(‘a[href=”‘ + selector + ‘”]’).text(value);

    Otherwise very useful, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>