只在需要時將div更改爲活動類

Question

我試圖讓我的小傳送帶控件的每個標題/塊欄在「活動」並顯示其內容時變爲藍色。現在他們會在點擊時保持藍色和黑色之間的切換，這幾乎只是測試的東西，但總體來說有人可能會修改我的JavaScript來控制每個按鈕的活動/非活動狀態來做到這一點。

我已經離開現場的URL來看看，所以你可以看到，有些代碼：

直播網址：（首頁，旁邊的大圖）http://bit.ly/1bijza0

HTML

<ul id="index-controls"> 
    <li><div id="1" class="active">FREE DISC Profile</div> 
     <ul> 
      <li><h2>Training that fits like a glove</h2></li> 
      <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li> 
     </ul> 
    </li> 
    <li><div id="2">Last Minute Availability</div> 
     <ul> 
      <li><h2>Training that fits like a glove</h2></li> 
      <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li> 
     </ul> 
    </li> 
    <li><div id="3">Bespoke Training</div> 
     <ul> 
      <li><h2>Training that fits like a glove</h2></li> 
      <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li> 
     </ul> 
    </li> 
</ul> 

的JavaScript

jQuery('#1').click(function() { 
    jQuery(this).toggleClass('active'); 
}); 
jQuery('#2').click(function() { 
    jQuery(this).toggleClass('active'); 
}); 
jQuery('#3').click(function() { 
    jQuery(this).toggleClass('active'); 
}); 

CSS

#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #4e92ad; color: #fff; font-size: 1.1em; } 
#index-controls .active { background-color: #4e92ad; } 
#index-controls ul { padding-left: 0; margin-top: 0; } 
#index-controls ul{ display: none; background-color: transparent; padding: 10px 10px 0px 10px; } 
#index-controls ul li { list-style-type: none; background-color: transparent; width: 240px; color: #fff; font-size: 12px; } 

Answer 1

首先，不要使用數字作爲你的id，也不要使用數字作爲id的第一個字母。

其次，不要使用ID的jQuery的這一部分。

給所有這些div同一類，如class="same-class"

這樣的：

<div id="one" class="active same-class">FREE DISC Profile</div> 

<div id="two" class="same-class">Last Minute Availability</div> 

<div id="three" class="same-class">Bespoke Training</div> 

然後爲jQuery的做到這一點。

jQuery('.same-class').click(function(){ 
    jQuery('.same-class').removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

所以每當你點擊有class="same-class"的元素，它會刪除任何元素的任何active類same-class，但隨後它將類active添加到您點擊的一個。

因此，這將適用於所有這三個div，以及如果您添加了同一個類別的另外一千個div。

編輯：這裏有一個演示http://jsfiddle.net/az4c3/

Answer 2

作爲速戰速決，你可能只是做到這一點：

jQuery('#1,#2,#3').click(function(){ 
    jQuery('#1,#2,#3').removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

請記住，這是不靈活的解決方案，你想保持你的代碼重用。所以從長遠來看，您希望使用類而不是id來保持代碼的靈活性。在上面的代碼中還有一個不必要的「搜索查詢」。一個重構，多好的辦法是這樣的：

var $clickables = $('.clickable'); 
$clickables.click(function(){ 
    $clickables.removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

這會讓你的代碼規模，與你加入.clickable元素的數量，如果你一旦想你的手風琴擴展到第四或第五元素。

Answer 3

像這樣的東西應該做的伎倆爲您提供：

jQuery("#input-controls div").click(function() { 
    jQuery("#input-controls div.active").add(this).toggleClass("active"); 
}); 

Answer 4

這裏有一個的jsfiddle這是非常靈活：

http://jsfiddle.net/8VxLw/1/

var list = jQuery('#index-controls li div'); 
list.click(function() { 
    list.removeClass('active'); 
    jQuery(this).addClass('active'); 
});