javascript - On Off Button Toggling -


I have a mobile toolbar that has four buttons, each button is using Phantom for background image position. Each button has the name of the unique class because everyone should be especially located inside the phantom.

When a page loads, no buttons are selected. When a button is pressed, it is the active psuedo square: active change in a blue icon from a white icon, when the button is released from the active state in blue, it remains blue. no problem. But then I want that behavior to happen when another button is pressed, that button turns this state into an active state, and the button which was in active position, returns to its default position before this.

So when a button is pressed, this status is activated, and when another button is pressed, it goes back to its default state.

Here's the HTML of the button:

  & lt; Div id = "s800-footer" align = "center" class = "s800-toolbar" & gt; & Lt; Button ID = "s800-current-location-btn" class = "locationIcon" & gt; & Lt; / Button & gt; & Lt; Button ID = "s800-1-map-btn" class = "s800-footer-btn mapIcon" & gt; Maps & lt; / Button & gt; & Lt; Button ID = "s800-2-feature-list-btn" class = "s800-footer-btn listIcon" & gt; List & lt; / Button & gt; & Lt; Button ID = "s800-3-select-btn" class = "s800-clickable s800-footer-btn select Icon" & gt; Select & lt; / Button & gt; & Lt; Button ID = "s800-4-selected-option-BTN" class = "s800-footer-btn selectedIcon" & gt; Selected & lt; / Button & gt; & Lt; / Div & gt;   

Here's the JavaScript:

  $ (".800-Toolbar button"). $ (This is). $ $ (This) .removeClass ("mapIcon"); $ (this) .addClass ("active"); $ (" .listIcon "). RemoveClass (" listIconActive "); $ (" $ (this) .removeClass ("listIcon"); $ (this) .addClass ("listIconActive", "list icon"); addClass ("listIcon") ; And ($ (this) .hasClass ("listIcon")) $ ("map icon"). RemoveClass ("mapIconActive"); $ ("map icon"). AddClass ("mapIcon");}})   

The icons on the left-hand toolbar are .mapIcon, .listIcon, .chooseIcon, and .selectedIcon. I have included only the first two codes, because once I get the .listIcon If pressed, then I will activate it To get the .map icon, I can repeat the functionality of others.

Thanks in advance Chris

You are confusing it, the first is not the same as : active a class .active Second, this hardcode checks making javascript easier There is not a bunch of. It keeps a lot of maintenance, keep it simple

HTML: & lt; div class = "toolbar" & gt; & Lt; Button class = "icon 1" & gt; A & lt; / Button & gt; & Lt; Button class = "icon 2" & gt; B & lt; / Button & gt; & Lt; / Div & gt;

CSS:

  .icon1 {background color: #cccc 00; } .icon1.selected {background-color: # FFFF00; } .icon2 {background color: # 00 CCCCC; } .icon2.selected {background-color: # 00FFFF; }   

Javascript:

  $ (". Toolbar"). ("Click", "button", function () ($ (this) .toggleClass ("selected") // If you do not want people to remove selection, do not call toggle class .siblings (". Selected"). RemoveClass ("selected");});   

Object:

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -