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"的元素时，它都会从active的任何元素中删除任何same-class类，但它会添加类{{1你点击的那个。

因此，这将适用于所有这三个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元素的数量成比例。

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

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

4 个答案: