在导航中突出显示当前页面 [英] Highlighting current page in the nav

问题描述

我需要在左侧导航栏中突出显示当前页面.

I need to highlight the current page in my left nav.

导航必须通过.shtml include从外部加载:

The nav has to be loaded externally via an .shtml include:

<!--#include file="leftnav-menu.inc"-->

我的网址采用以下形式:

My urls take the form of:

www.xxx.com/mission-critical.shtml

www.xxx.com/mission-critical.shtml

但有时只是:

www.xxx.com/energy.shtml(例如，一个字没有连字符)

www.xxx.com/energy.shtml (eg one word no hyphen)

我的导航将其列为关键任务"

My nav lists it as 'Mission critical'

如何用"class = selected"突出显示ul?我看过这样的东西:

How can I highlight the ul li with "class=selected"? I've seen something like this:

$(function(){
   var path = location.pathname.substring(1);
   if ( path )
     $('.leftmenuNav ul li a[@href$="' + path + '"]').attr('class', 'selected');
 });    

不能完全理解字符串拆分等...

Can't quite get my head around the string splitting etc...

示例导航栏:

<ul>
<li><a href="corporate-responsibility.shtml">Corporate responsibility</a></li>
<li><a href="overview.shtml">Overview</a></li>
<li><a href="governance.shtml">Governance</a></li>
<li><a href="our-approach.shtml">Our approach</a></li>
</ul>

推荐答案

好的，jQuery语法有点错误.这应该起作用:

Okay, the jQuery syntax was slightly wrong. This should work:

$.ready(function()
{
   var path = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
   if ( path )
     $('.leftmenuNav ul li a[href="' + path + '"]').attr('class', 'selected');
});

还要确保leftmenuNav是正确的(上面的代码没有显示出来)

Also, make sure the leftmenuNav is right (your code above doesn't show it)

这篇关于在导航中突出显示当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！