Tab Changer

Hiya,

I have different tabs that are all in the markup as default with only the first one having an exposed class. The others have hidden classes (display: hidden).

Each tab is invoked by an onclick even on the hyperlink, running this script:

[code]
function displayTab(carID, tabName) {
document.getElementById(carID + ‘_mnui_desc’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_specs’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_photos’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_videos’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_price’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_build’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_reviews’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_scores’).className = ‘tab’;
document.getElementById(carID + ‘_mnui_events’).className = ‘tab’;
document.getElementById(carID + ‘_desc’).className = ‘hidden’;
document.getElementById(carID + ‘_specs’).className = ‘hidden’;
document.getElementById(carID + ‘_photos’).className = ‘hidden’;
document.getElementById(carID + ‘_videos’).className = ‘hidden’;
document.getElementById(carID + ‘_price’).className = ‘hidden’;
document.getElementById(carID + ‘_build’).className = ‘hidden’;
document.getElementById(carID + ‘_reviews’).className = ‘hidden’;
document.getElementById(carID + ‘_scores’).className = ‘hidden’;
document.getElementById(carID + ‘_events’).className = ‘hidden’;
document.getElementById(carID + ‘_mnui_’ + tabName).className = ‘active_tab’;
document.getElementById(carID + ‘_’ + tabName).className = ‘exposed’;
}
[/code]

My question is can it be made more efficient, i.e. without having to manually specify each tab?

[code]
<ul>
<li id=”2_mnui_desc” class=”active_tab”><a href=”#desc” onclick=”displayTab(‘2’, ‘desc’);return false;”>Description</a></li>
<li id=”2_mnui_specs” class=”tab”><a href=”#specs” onclick=”displayTab(‘2’, ‘specs’);return false;”>Specifications</a></li>
<li id=”2_mnui_photos” class=”tab”><a href=”#photos” onclick=”displayTab(‘2’, ‘photos’);return false;”>Photos</a></li>
<li id=”2_mnui_videos” class=”tab”><a href=”#videos” onclick=”displayTab(‘2’, ‘videos’);return false;”>Videos</a></li>
<li id=”2_mnui_price” class=”tab”><a href=”#price” onclick=”displayTab(‘2’, ‘price’);return false;”>Price List</a></li>
<li id=”2_mnui_build” class=”tab”><a href=”#build” onclick=”displayTab(‘2’, ‘build’);return false;”>Build</a></li>
<li id=”2_mnui_reviews” class=”tab”><a href=”#reviews” onclick=”displayTab(‘2’, ‘reviews’);return false;”>Reviews</a></li>
<li id=”2_mnui_scores” class=”tab”><a href=”#scores” onclick=”displayTab(‘2’, ‘scores’);return false;”>Scores</a></li>
<li id=”2_mnui_events” class=”tab”><a href=”#events” onclick=”displayTab(‘2’, ‘events’);return false;”>Events</a></li>
</ul>
[/code]

Also in #JavaScript _↴