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），我希望父 li“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是 .active 的子项，li因此看起来所有兄弟姐妹都被选中了）。

只需为.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-coloron 。ul

于 2011-05-04T20:35:12.477 回答
0

我认为你的第二个脚本应该是这样的：

编辑

$('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

正如保罗所说，整个li父母都有背景，它封装了孩子ul。避免这种情况的一种方法是使用背景图像，该图像仅与父链接一样高，并且不会在 y 轴上重复。

于 2011-05-04T20:45:17.673 回答