1

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>

4

2 回答 2

1

您的问题主要是由于 Css 的特殊性。是的，您已经在应用该类，但它被另一个应用在labelwhich overrides.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");

演示

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

几本好书；这个和这个

于 2013-06-14T02:04:06.097 回答
1

这是示例：演示

你需要的只是改变“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
});
于 2013-06-14T04:33:44.403 回答