I'm using a tab script I ran across that works only if I remove the portion of the function that removes the "active" class on the active tab when a new tab is selected.
The script requires prototype.
Code:
var visibleTabContent = 'one';
function switchTabs(ulId, clickedListItem, clickedListItemsDivId) {
if (!$(clickedListItemsDivId).visible()) {
$(visibleTabContent).hide(); //hide the DIV contents for the old tab
$(ulId).select('li.active').invoke('removeClassName', 'active'); //remove the "active_tab" class from the old tab
$(clickedListItem.id).addClassName('active'); //add the "active" class to the new tab
$(clickedListItemsDivId).show(); //show the DIV contents for the new tab
visibleTabContent = clickedListItemsDivId; //save the name of the active tab for future reference
}
}
IF I remove
Code:
$(ulId).select('li.active').invoke('removeClassName', 'active');
The tab selection functions; however, as one might guess, it's not shifting the "active" style from tab to tab, it's simply assigning it.
I've tried doing
Code:
$(ulId).select('li.active').removeClassName('active');
sinse "removeClassName" is a prototype function, but it delivers the same results.
Error: $(ulId).select is not a function ???
The accompanying mark-up is
Code:
<ul id="tabs_menu" class="margin_20 clearfix">
<li id="cat1" class="active" onclick="switchTabs('tabs_menu', this, 'one')">Cat 1 +</li>
<li id="cat2" onclick="switchTabs('tabs_menu', this, 'two')">Cat 2 +</li>
<li id="cat3" onclick="switchTabs('tabs_menu', this, 'three')">Cat 3 +</li>
</ul>
<div id="one">
<!--Content Here-->
</div>
<div id="two">
<!--Content Here-->
</div>
<div id="three">
<!--Content Here-->
</div>
Any advice?
Thanks