僅在需要時將div更改為活動類

Question

我試圖讓我的小旋轉木馬控件的每個標題/塊欄在“活動”時顯示為藍色並顯示其內容。 現在，當點擊它們時，它們將繼續在藍色和黑色之間切換，這幾乎只是測試出來的東西，但總體上有任何人可能能夠修改我的javascript來控制每個按鈕的活動/非活動狀態來執行此操作。

我留下了一個實時網址，看看你可以看到一些代碼：

實時網址： 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"的元素時，它將從具有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');
});

如果您曾經想將手風琴擴展到第4或第5個元素，這將使您的代碼與您添加的.clickable元素的數量成.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');
});