I have a page with some css custom buttons and I want the selected button to stay highlighted when a user clicks elsewhere on the page. I can get what I want writing an if/else statement to assign a class when a button is selected and a different class if it's not selected but it's long winded, how can I write it to be more efficient?
<input class="btn" id="moveIt_overall2" type="button" value="Overall" onclick="changeImpactState('impact_overall');"/>
<input class="btn" id="moveIt_customer" type="button" value="Customer" onclick="changeImpactState('impact_customer');" />
<input class="btn" id="moveIt_staff" type="button" value="Staff" onclick="changeImpactState('impact_staff');" />
<input class="btn" id="moveIt_strategic" type="button" value="Strategic" onclick="changeImpactState('impact_strategic');" />
var moveItOverall = document.getElementById('moveIt_overall2');
var moveItCustomer = document.getElementById('moveIt_customer');
var moveItStaff = document.getElementById('moveIt_staff');
var moveItStrategic = document.getElementById('moveIt_strategic');
if(currentImpactState == 'impact_overall'){
moveItOverall.className = 'btn-on';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_customer'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn-on';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_staff'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn-on';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_strategic'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn-on';
}
Aucun commentaire:
Enregistrer un commentaire