javascript 仅在需要时将 div 更改为活动类

Change div to class active only when needed

提问by wharfdale

I am trying to get each title/block bar of my little carousel controls to change to blue when 'active' and showing its content. Right now they will keep switching between blue and black when clicked, this is pretty much just be testing things out but overall is there anyone which may be able to amend my javascript to control the active/non active state of each button to do this.

我试图让我的小轮播控件的每个标题/块栏在“活动”并显示其内容时更改为蓝色。现在他们会在点击时继续在蓝色和黑色之间切换，这几乎只是在测试一下，但总的来说，有没有人可以修改我的 javascript 来控制每个按钮的活动/非活动状态来做到这一点。

I've left a live url to have a look so you can see and some code:

我留下了一个实时网址来看看，这样你就可以看到一些代码：

Live URL: http://bit.ly/1bijza0(Homepage, next to the large image.)

实时网址：http: //bit.ly/1bijza0（主页，大图旁边。）

HTML

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

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

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

采纳答案by CRABOLO

Firstly, don't use a number for your id, and don't use a number as the first letter of an id.

首先，不要使用数字作为您的id，也不要使用数字作为id的第一个字母。

Secondly, don't use id's for the jquery part of this.

其次，不要在 jquery 部分使用 id。

Give all those divs the same class, such as class="same-class"

为所有这些 div 赋予相同的类，例如 class="same-class"

like this:

像这样：

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

And then for your jquery do this.

然后为您的 jquery 执行此操作。

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

So whenever you click on an element that has class="same-class", it will remove any activeclass from any of the elements with same-class, but then it will add the class activeto the one you clicked on.

因此，每当您单击具有 的元素时class="same-class"，它都会active从具有 的任何元素中删除任何类same-class，但随后会将类添加active到您单击的元素中。

So this will work for all three of those div's, as well as if you added a thousand more divs with that same class.

所以这将适用于所有三个 div，以及如果您添加一千多个具有相同类的 div。

EDIT : Here's a demo http://jsfiddle.net/az4c3/

编辑：这是一个演示http://jsfiddle.net/az4c3/

回答by markusthoemmes

As a quick fix you could just do that:

作为快速修复，您可以这样做：

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

Keep in mind, that this is no flexible solution and you want to keep your code reusable. So in the long run you want to work with classes rather than id's to keep your code flexible. There is also one unnecessary "search-query" in the above code. A refactored, much nice approach would be something like:

请记住，这不是灵活的解决方案，您希望保持代码可重用。因此，从长远来看，您希望使用类而不是 id 来保持代码的灵活性。上面的代码中还有一个不必要的“搜索查询”。一个重构的，非常好的方法是这样的：

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

This will make your code scale with the number of .clickableelements you add, if you once want to extend your accordion to a 4th or 5th element.

.clickable如果您曾经想将手风琴扩展到第 4 个或第 5 个元素，这将使您的代码根据您添加的元素数量进行缩放。

回答by gpgekko

Something like this should do the trick for you:

像这样的事情应该对你有用：

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

回答by SamV

Here's a JSFiddle that is very flexible:

这是一个非常灵活的 JSFiddle：

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

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

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