Question

我想根据当前有效网址突出显示导航菜单中的当前链接。

如果我的导航菜单是纯CSS，我找到了很多解决方案，但我的菜单是基于图像的，因此每个链接的活动类都不同，这就是我被困住的地方。

有人可以建议我可以使用的东西吗？我对jQuery很新，但发现它非常有用，是我学过的最好的语言之一。

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <li><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

每个a标记都有一个预加载的CSS背景图片，每个类都有一个悬停函数。

Answer 1

您可以使用javascript在＃：

之后获取网址的一部分

window.location.hash

然后再次使用jQuery突出显示相关元素：

var linkClass = window.location.hash;
$("."+linkClass).prop("class",linkClass+" highlight");

这只是一种方法（可能不是最优雅的）。在这种情况下，你的CSS将是这样的：

.pageOne {

}  
.pageOne.highlight {

}

和您的HTML一样：

<a href="pageOne.html#pageOne">Page One</a>

Answer 2

基于CSS的方法没有理由不适合您。我脑子里有两种主要方法：

首先，将类放在父元素上，fex：

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li class="current"><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

然后，您可以使用以下CSS规则：

.current .products { /* ... */ }
.current .services { /* ... */ }
.current .about.us { /* ... */ }
.current .contact-us { /* .... */ }
.current .directory { /* ... */ }
.current .bloc { /* ... */ }

此解决方案允许您为每个条目设置不同的样式，如果您需要更改图像fex，这是很好的。

如果您需要为所有条目设置相同的样式并且基于元素上有多个类，则另一个解决方案更容易：

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li><a class="services current" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

相应的CSS将是：

.current { /* ... */ }

使用jquery基于当前URL设置活动菜单项

2 个答案: