1

私は自分のコードでこの 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>

4

2 に答える 2

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

デモ

あなたのケースで起こったことは、によって適用された境界線の色が.ac-container label{、ラベルに適用されたルールを class でオーバーライドすること.ac-activeです。さらに、上記のスクリプトは、以前に選択したタブ クラスからクラスを削除しますac-active。

いくつかの良い読み取り。これとこれ

于 2013-06-14T02:04:06.097 に答える