Question

在下一页的示例中，我希望将“active”类应用于活动链接的父级：

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和父母，我绝对不想要。

有什么想法吗？

Answer 1

它没有选择所有内容..

它只选择父级。问题在于.active的CSS规则会对整个li（）进行样式处理，因为ul是li的孩子，看起来像选择所有兄弟姐妹）。

只需为.active ul{background-color:white;}

创建一条css规则

如果问题出在红色边框而不是背景颜色那么罪魁祸首就是这部分

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

但这太明显了，不是真正的问题..

Answer 2

似乎您正在将样式应用于整个ul，这就是为什么它“改变”其所有孩子......您可能需要重置background-color ul使用CSS。

Answer 3

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

修改

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

因此，我们只将active类添加到锚点。发生的事情是你要把整个课程添加到整个li，包括孩子。

希望这会有所帮助干杯

Answer 4

它实际上并没有突出显示兄弟姐妹，它突出显示了父li及其中的所有内容。

我会将活动课程放在小猫链接上，或者您可以为父母添加不同的班级名称，例如active-trail。

Answer 5

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

父母（）抓住兄弟姐妹

5 个答案: