Question

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

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

因此，当按下某个按钮时，它的状态将保持活动状态，并在按下另一个按钮时返回其默认状态。

以下是按钮的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>

这是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");   
    }

    })

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

提前致谢。克里斯

Answer 1

我想给出的答案是使类名统一，并在设置其中一个按钮之前对所有按钮使用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");
})

Answer 2

每个按钮有三个班级对于地图图标，有：

.mapIcon， .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;
   }

Answer 3

你过度复杂了。第一个:active与类.active不同。其次，简化JavaScript，因此它不是一堆硬编码检查。这导致了太多的维护，保持简单。

<强> 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 you do not want people to remove the selection, then do not call toggleClass
          .siblings(".selected").removeClass("selected");
});

小提琴：http://jsfiddle.net/9uag99r6/

开关按钮切换

3 个答案: