jQuery UI - Unique tabs with tabs widget

JavaScript
1

Hi everyone,

I’ve just started using jQuery UI in website I’m building for a client and I’m using the tabs widget. So far it works great however I was wondering if anyone knew how I can only add a new tab if an tab with that same URL doesn’t already exist (and if it does exist, select it rather than adding a new one)?

This is what I’m currently using which works fine but users can open the same URL multiple times.

<script type="text/javascript">
$(document).ready(function() {
	var $tabs = $('#tabs').tabs({
		tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="css_left ui-icon ui-icon-close" style="margin:7px 7px 0 0;cursor:pointer;"></span></li>',
		cache: true,
		add: function(event, ui) {
			$tabs.tabs('select', ui.panel.id);					
		}
	});
	
	$('#enrolments tbody').live('click', function(event) {
		var id = $(event.target.parentNode).attr('id');

		$tabs.tabs('add', '<?php echo site_url('client'); ?>/' + id, $(event.target.parentNode).attr('title'));
	});
	
	$('#tabs span.ui-icon-close').live('click', function() {
		var index = $('li',$tabs).index($(this).parent());
		$tabs.tabs('remove', index);
	});
});
</script>