Weekday jQuery UI Tabs open on current day - jquery-ui

Question

I have weekday jQuery UI tabs as follows which I want to open on the current weekday:
<div id="tabs">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
I want the tabs to open on the current day of the week, I know something like this works:
.eq((new Date().getDay() || 7) - 1).click();
But can't get it to work and would appreciate some help. Also, I would like the tab for the current day to display the word 'Today' instead of the weekday.
I would appreciate some help.
Thanks,
Brendon

Answer 1

You can use the following to select the tab matching the current day:
$('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
and you could modify the text of the active tab with the following:
$('#tabs .ui-state-active a').text('Today');
HTML
<div id="tabs">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
</div>
JavaScript
$('#tabs').tabs();
$('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
$('#tabs .ui-state-active a').text('Today');
and needs the jQuery and jQuery UI libraries.
Demo