Javascript 开关按钮切换

我有一个移动工具栏，有四个按钮。每个按钮都使用精灵来定位背景图像。每个按钮都有一个唯一的类名，因为每个按钮都需要在精灵中唯一定位

加载页面时，不选择任何按钮。当按下按钮时，它的活动psuedo类：活动从白色图标变为蓝色图标，当按钮从蓝色的活动状态释放时，它保持蓝色。没问题。但我想要的行为是，当按下另一个按钮时，该按钮将其状态更改为活动状态，在此之前处于活动状态的按钮将返回其默认状态

因此，当一个按钮被按下时，它的状态保持在活动状态，当另一个按钮被按下时，它会回到默认状态

以下是按钮的HTML：

<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>

工具栏上从左到右的图标有.mapIcon、.listIcon、.chooseCon和.selectedIcon。我只包含了前两个的代码，因为一旦我让.mapIcon在按下.listIcon时关闭其活动状态，我就可以将该功能复制到其他功能

提前谢谢。

---

Chris

我想给出的答案是使类名统一，在将其中一个按钮设置为活动之前，对所有按钮使用

removeClass

这里有一个想法：

<div class="buttons">
    <button id="button1" class="btn" ></button>
    <button id="button2" class="btn" ></button>
    <button id="button3" class="btn" ></button>
    <button id="button4" class="btn" ></button>
    <button id="button5" class="btn" ></button>
</div>

.btn{
    background-image:(....);
    background-position: ....;
}
#button1&.active{  //Active button styles
    background-image:(....);
    background-position: ....;
}


$("#button1").click(function(){
    $(".btn").removeClass("active");
    $(this).addClass("active");
})

.btn{
背景图像：（……）；
背景位置：。。。。；
}
#button1&活动{//活动按钮样式
背景图像：（……）；
背景位置：。。。。；
}
$（“#按钮1”）。单击（函数（）{
$（“.btn”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
})

每个按钮有三个类。
对于地图图标，有：

马皮孔先生， .mapIcon:活动， .主动

.listIcon， .listIcon：活动， .listIcon.active

其他两个也一样。我不能只给它们相同的类，比如“.btn”，然后设置一个背景图像和位置，因为我使用的是一个精灵表，每个图像都是根据精灵表上的不同坐标定位的。以下是完整的CSS，如果您希望看到：

.mapIcon{
     background:url(../images/sprite_sheet.png) no-repeat -267px -84px;
    width:42px;
     border:0;
     text-align: center;
 }
.mapIcon:active{
    background:url(../images/sprite_sheet.png) no-repeat;
    background-position: -332px -84px !important;
    }
.active{
    background:url(../images/sprite_sheet.png) no-repeat;
    background-position: -332px -84px !important;
 }
.listIcon{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: -413px -82px !important;
    width:42px;
    border:0;

}
.listIcon:active{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: 6px -127px !important;
    width:42px;
    border:0;
}
.listIconActive{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: 3px -127px !important;
   width:42px;
    border: 1px solid red;
}
.chooseIcon{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: -56px -127px !important;
    /*height:45px;*/
    width:53px;
    border:0;
    padding-right: 5px;
}

.chooseIcon:active{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: -480px 0px !important;
   width:57px;
    border:0;
    padding-right: 5px;
}
.chooseIconActive{
    background:url(../images/sprite_sheet.png) no-repeat !important;
    background-position: -480px 0px !important;
   width:57px;
    border:0;
    padding-right: 5px;
}
.selectedIcon{
    background:url(../images/sprite_sheet.png) no-repeat !important ;
    background-position: -150px -127px !important;
    width:60px;
    border:0;
    text-align: center;
  }

 .selectedIcon:active{
    background:url(../images/locator_glyphs_copy.png) no-repeat !important ;
    background-position: -616px 0px !important;
    width:60px;
    border:0;
    text-align: center;
  }

 .selectedIconActive{
    background:url(../images/locator_glyphs_copy.png) no-repeat !important ;
    background-position: -616px 0px !important;
    width:60px;
    border:0;
    text-align: center;
   }

---

你把事情复杂化了。第一个

：active

与类

.active

不同。其次，简化JavaScript，使其不再是一堆硬编码检查。这会导致太多的维护，请保持简单

HTML:

<div class="toolbar">
    <button class="icon1">A</button>
    <button class="icon2">B</button>
</div>

.icon1 { 
    background-color: #CCCC00;
}
.icon1.selected { 
    background-color: #FFFF00;
}
.icon2 { 
    background-color: #00CCCC;
}
.icon2.selected { 
    background-color: #00FFFF;
}

$(".toolbar").on("click", "button", function() {
   $(this).toggleClass("selected")  //If you do not want people to remove the selection, then do not call toggleClass
          .siblings(".selected").removeClass("selected");
});

JavaScript:

<div class="toolbar">
    <button class="icon1">A</button>
    <button class="icon2">B</button>
</div>

.icon1 { 
    background-color: #CCCC00;
}
.icon1.selected { 
    background-color: #FFFF00;
}
.icon2 { 
    background-color: #00CCCC;
}
.icon2.selected { 
    background-color: #00FFFF;
}

$(".toolbar").on("click", "button", function() {
   $(this).toggleClass("selected")  //If you do not want people to remove the selection, then do not call toggleClass
          .siblings(".selected").removeClass("selected");
});

---

小提琴手：

可能重复的。你可以通过搜索找到更多。你可以添加一个JSFIDLE演示吗？您是否尝试过使用单选按钮，在任何给定时间只能选择一个按钮？请仔细想想。如果你删除了类

mapIcon

，你以后就没有办法重新选择它了……简化CSS。我完全搞糊涂了。为什么有

active

，

listIconActive

，

mapIconActive

等？为什么不是单一

活动
类？你为什么要删除他们原来的课程？有趣的回答是Epascarello。我试试这个。谢谢。当您第一次加载页面时，如果我希望.icon1的默认状态为“选中”，该怎么办？我很感激。那你为什么不把它设置成HTML格式呢？另一种选择是在它上面叫“点击”<代码>$（“.icon1”）。单击（）