javascript - On Off Button Toggling -

javascript - On Off Button Toggling -

i have mobile toolbar has 4 buttons. each button using sprite position background image. each button has unique class name each needs positioned uniquely within sprite.

when page loads, no buttons selected. when button pressed, it's active psuedo class :active changes white icon bluish icon, when button released it's active state in blue, stays blue. no problem. behavior want when button pressed, button alter it's state active state , button in active state before one, returns default state.

so when button pressed, it's state persists in active, , goes default state when button pressed.

here html of buttons:

<div id="s800-footer" align="center" class="s800-toolbar"> <button id="s800-current-location-btn" class="locationicon" ></button> <button id="s800-1-map-btn" class="s800-footer-btn mapicon" >map</button> <button id="s800-2-facility-list-btn" class="s800-footer-btn listicon" >list</button> <button id="s800-3-choose-btn" class="s800-clickable s800-footer-btn chooseicon">choose</button> <button id="s800-4-selected-options-btn" class="s800-footer-btn selectedicon">selected</button> </div>

here's javascript:

$(".s800-toolbar button").click(function(){ if ($(this).hasclass("mapicon")){ $(this).removeclass("mapicon"); $(this).addclass("active"); $(".listicon").removeclass("listiconactive"); $(".listicon").addclass("listicon"); }else if ($(this).hasclass("listicon")){ $(this).removeclass("listicon"); $(this).addclass("listiconactive"); $(".mapicon").removeclass("mapiconactive"); $(".mapicon").addclass("mapicon"); } })

from left right on toolbar icons .mapicon, .listicon, .chooseicon, , .selectedicon. i've included code first 2 because 1 time .mapicon turn off it's active state when .listicon pressed, can replicate functionality others.

thanks in advance. chris

you on complicating it. first :active not same thing class .active. second, simplify javascript not bunch of hardcoded checks. leads much maintenance, maintain simple.

html:

<div class="toolbar"> <button class="icon1">a</button> <button class="icon2">b</button> </div>

css:

.icon1 { background-color: #cccc00; } .icon1.selected { background-color: #ffff00; } .icon2 { background-color: #00cccc; } .icon2.selected { background-color: #00ffff; }

javascript:

$(".toolbar").on("click", "button", function() { $(this).toggleclass("selected") //if not want people remove selection, not phone call toggleclass .siblings(".selected").removeclass("selected"); });

fiddle: http://jsfiddle.net/9uag99r6/

javascript jquery