打開關閉按鈕切換

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關閉它的活動狀態，我就可以將功能複製到其他功能。

在此先感謝。 Chris

Answer 1

你已經過於複雜了。第一個: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/

Answer 2

我想給出的答案是使類名一致，並在將其中的一個按鈕設置爲活動狀態之前對所有按鈕使用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 3

有三類爲每個按鈕。
對於地圖圖標，有：

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