如何使用jQuery将类添加到手风琴的活动选项卡中？

Question

I made this jfiddle with my code: http://jsfiddle.net/yp9v5/1/

I'm trying to add a class to the open tab (class is set to the first tab which is open on page load and then switched to another tab when it is clicked). I want to be able to style the active tab differently.

I have tried using addClass but I don't think i'm using it correctly to add the class to the active label.

Here is the jQuery I used:

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

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

Your issue is mainly due to Css specifity. Yes, you are already applying the class, but it is overridden by another rule applied on the label which overrides .classname rule anyways. So your syle is not getting applied.

Add this to your rule

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

Instead of

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

And in the script:

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

Instead of

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

Demo

What happened in your case is the border color applied by .ac-container label{ overrides the rule applied on the label with the class .ac-active . Plus the above script will remove the class from any previously selected tabs ac-active class.

Couple of good reads; this and this

Answer 2

Here is the example : Demo

What you need just change the css of "ac-active" increase his weight:

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

Updated Script:

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