1

次のページの例では、「アクティブ」クラスをアクティブ リンクの親に適用したいと考えています。

http://socalragdolls.com/jquerytest.html

<div id="topnav">
    <ul id="mainmenu">
        <li class="top" id="home"><a href="/">Home</a></li>
        <li class="top"><a href="kittens">Kittens</a>
            <ul id="mainmenu">
                <li><a href="caring">Caring for a Ragdoll</a></li>
                <li><a href="kittens">Current Litter</a></li>
                <li><a href="jquerytest.html">Future Litters</a></li>
                <li><a href="parents">Parents</a></li>
                <li><a href="pricing">Pricing</a></li>
                <li><a href="reserving">Reserving a Kitten</a></li>
            </ul>
        </li>
        <li><a href="about">About Us</a>
            <ul>
                <li><a href="about">Cattery</a></li>
                <li><a href="proprietor">Proprietor</a></li>
                <li><a href="testimonials">Testimonials</a></li>
            </ul>
        </li>
        <li class="last"><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

基本的に、訪問者がページ (jquerytest.html) にいるとき、親 "Kittens" もアクティブにする必要があります。

現在のjQueryは次のとおりです。

<script>
    $("#topnav a").each(function() {
        if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
        $(this).parent('li').addClass('active');
    });
</script>

<script>
    $(document).ready(function() {
        $('li.active').parent().parent().addClass('active');
    });
</script>

ご覧のとおり、これにより、子 .active li のすべての兄弟が親とともに強調表示されますが、これは絶対に望ましくありません。

何か案は？

4

5 に答える 5

1

すべてを選択するわけではありません。

親だけを選択します。問題は、全体をスタイル設定する.activeのCSSルールにありますli（そして、ulはその子であるため、すべての兄弟が選択されているようliに見えます）。

のcssルールを作成するだけです.active ul{background-color:white;}

問題が背景色ではなく赤い境界線にある場合、原因はこの部分です

$(document).ready(function() {
    $('li ul li.active').siblings().css('border', '1px solid red');
    $('li ul li.active').siblings().css('background-color', '#333');
});

しかし、それはあまりにも明白で、本当の問題にはなりません。

于 2011-05-04T20:36:53.163 に答える
0

スタイルを全体に適用しているようです。ulそのため、すべての子も「変更」されます... CSSの使用をリセットbackground-colorする必要がある場合があります。ul

于 2011-05-04T20:35:12.477 に答える
0

2番目のスクリプトは次のようになります。

編集

$('li.active').closest("li").find("a").addClass('active');

activeしたがって、これではクラスをアンカーに追加するだけです。何が起こっていたのかというと、子を含むli全体にクラスを追加しているということです。

これが乾杯に役立つことを願っています

于 2011-05-04T20:37:25.473 に答える
0

実際には兄弟を強調表示するのではなく、親liとその中のすべてのコンテンツを強調表示します。

active-trail代わりに、アクティブなクラスを子猫のリンクに配置します。または、親のように別のクラス名を追加することもできます。

于 2011-05-04T20:38:07.197 に答える
0

liPaulが言うように、親全体には、子をカプセル化する背景がありますul。これを回避する1つの方法は、親リンクと同じ高さで、y軸上で繰り返されない背景画像を使用することです。

于 2011-05-04T20:45:17.673 に答える