javascript - 如何使用 jQuery 将类添加到 Accordion 中的事件选项卡？

Question

我用我的代码制作了这个 jfiddle:http://jsfiddle.net/yp9v5/1/

我正在尝试向打开的选项卡添加一个类(类设置为页面加载时打开的第一个选项卡，然后在单击时切换到另一个选项卡)。我希望能够以不同的方式设置事件选项卡的样式。

我尝试过使用 addClass，但我认为我没有正确使用它来将类添加到事件标签。

这是我使用的 jQuery:

    jQuery(".alt_block_wrapper .ac-container div label").click(function() {

    jQuery(".alt_block_wrapper .ac-container div article").css("display", "none");
    jQuery(this).parent().find("article").fadeIn("slow");
    jQuery(this).addClass("ac-active");
});
jQuery(".alt_block_wrapper .ac-container div article").css("display", "none");
jQuery(".alt_block_wrapper .ac-container div article").first().css("display", "block");

和 html:

<div class="alt_block_wrapper one-third">
        <section class="ac-container">
            <div>
                <input id="ac-1412" name="accordion-1412" type="radio" checked />
                <label for="ac-1412">First Tab</label>
                <article class="ac-medium">
                    <p>Nostraaptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </article>
            </div>
            <div>
                <input id="ac-2412" name="accordion-1412" type="radio" />
                <label for="ac-2412">Second Tab</label>
                <article class="ac-medium">
                    <p>Nostraaptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </article>
            </div>
            <div>
                <input id="ac-3412" name="accordion-1412" type="radio" />
                <label for="ac-3412">Third Tab</label>
                <article class="ac-medium">
                    <p>Nostraaptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </article>
            </div>
            <div>
                <input id="ac-4412" name="accordion-1412" type="radio" />
                <label for="ac-4412">Fourth Tab</label>
                <article class="ac-medium">
                    <p>Nostraaptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </article>
            </div>
            <div>
                <input id="ac-5412" name="accordion-1412" type="radio" />
                <label for="ac-5412">Fifth Tab</label>
                <article class="ac-medium">
                    <p>Nostraaptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </article>
            </div>
        </section>

Answer 1

您的问题主要是由于 Css 特异性。是的，您已经在应用该类，但它被应用于 label 的另一条规则覆盖，该规则无论如何都会覆盖 .classname 规则。所以你的风格没有得到应用。

将此添加到您的规则

label.ac-active {
    border-color:red;
}

代替

.ac-active {
        border-color:red;  // if you add !important then it will work too, but not recommended to use that when you have a way to resolve it without it.
    }

在脚本中:

// Remove class from other tab which is already active and apply to the current tab.
jQuery('.ac-active').not(jQuery(this).addClass("ac-active")).removeClass('ac-active');

代替

 jQuery(this).addClass("ac-active");

Demo

在您的案例中发生的事情是 .ac-container label{ 应用的边框颜色覆盖了应用于类 .ac-active 的标签的规则。另外，上述脚本将从任何先前选择的选项卡 ac-active 类中删除该类。

几本好书； this和 this