如何使用jQuery將類添加到手風琴的活動選項卡中？

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已被label上應用的另一條規則覆蓋，該規則始終會覆蓋.classname規則。 所以您的syle沒有得到應用。

將此添加到您的規則

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");

演示

您遇到的情況是.ac-container label{應用的邊框顏色會覆蓋.ac-active類所應用在標簽上的規則。 加上上面的腳本將從所有先前選擇的選項卡ac-active類中刪除該類。

幾本好書； 這個和這個

Answer 2

這是示例： 演示

您只需更改“ ac-active”的CSS即可增加他的體重：

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

更新的腳本：

mainElement= ".alt_block_wrapper .ac-container div";
$(mainElement).find("article").css("display", "none").first().css("display", "block").prev().addClass('ac-active'); 

$(mainElement).find("label").click(function() {
    $this=$(this);
    $(mainElement).find("article").hide(); // Hide all Elements
    $(mainElement).find("label").removeClass('ac-active'); // Hide all Elements
    $this.addClass('ac-active').parent().find("article").fadeIn("slow"); //current parent element
});