Jquery 在导航栏中突出显示当前页面

我试着尝试一下主题行中提出的问题。下面是我的HTML和jQ，这是我想要完成的

html

jQ

//菜单亮点。
$（文档）.ready（函数（）{
var pathname=（window.location.pathname.match（/[^\/]+$/）[0]）；
$（“.topnav1 li a”）。每个（函数（）{
if（$（this.attr（'href'）==路径名）{
$（“li.highlight”）.removeClass（“highlight”）；
$（this.parent（）.parent（）.addClass（“突出显示”）；
}
});
$（“li.highlight“）.parents（）.each（function（））{
如果（$（此）.is（“li”））{
$（此）.addClass（“突出显示”）；
}
});
});

---

其想法是从其默认列表项中删除突出显示的类，并将其分配给href属性与当前url匹配的列表项。我必须承认，我并不擅长编程匹配模式，所以我有点不知所措，不知道如何只将url的一部分与href属性匹配，我不确定这就是为什么我的代码不起作用（突出显示保留在主菜单项上，而不应用于其他项）。有什么想法吗？

我建议如下：

// in real life use: var curURL = document.location.toString();
var curURL = 'http://fiddle.jshell.net/_display/testimonials_page.php';

$('.topnav1 li.highlight').removeClass('highlight');
$('.topnav1 li a').each(
    function(){
        if (curURL.indexOf(this.href) != -1){
            $(this).closest('li').addClass('highlight');
        }
    });

var filename = window.location.pathname.match(/[^\/]+$/)[0];
$('li.highlight').removeClass('highlight');
$('ul.topnav1 li a[href="' + filename + '"]').parents('li').addClass('highlight');

参考资料：

• JavaScript，位于的资源：
• jQuery，来自：

---

您可以通过执行以下操作获得相同的结果：

// in real life use: var curURL = document.location.toString();
var curURL = 'http://fiddle.jshell.net/_display/testimonials_page.php';

$('.topnav1 li.highlight').removeClass('highlight');
$('.topnav1 li a').each(
    function(){
        if (curURL.indexOf(this.href) != -1){
            $(this).closest('li').addClass('highlight');
        }
    });

var filename = window.location.pathname.match(/[^\/]+$/)[0];
$('li.highlight').removeClass('highlight');
$('ul.topnav1 li a[href="' + filename + '"]').parents('li').addClass('highlight');

---

因为可以使用jQuery属性选择器，所以可以进行严格的检查，并让jQuery完成工作，

tag[attribute=“value”]

这为我提供了窍门：

  var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
  var domain_index =  window.location.href.indexOf(domain);
  var long_app_name = window.location.href.slice(domain_index+domain.length+1); 
  // this turns http://www.example.com/whatever/whatever to whatever/whatever
  app_name = long_app_name.slice(0, long_app_name.indexOf('/')); 
  //now you are left off with just whatever

然后使用jquery添加活动类

$（'nava[href*=“'+app_name+'“]'）。最近（'li'）。addClass（'active'）

当然还有css：

.active{background:red;}

如果您的html如下所示，则此操作有效：

<ul><li><a href="ee">ee</a></li><li><a href="dd">dd</a></li></ul>

---

如果你在www.somesite.com/ee-thaen-ee中的应用程序是“应用程序”，它将自动使用页面url添加类活动，并将你的背景颜色设置为红色，并且它将处于活动状态

你的小提琴不工作。当我点击链接时，它会将我重定向到一个错误页面。这是因为我使用了你发布的链接。因此，演示将使用这些链接中的相对URL链接到外部页面。演示的重点是展示jQuery如何找到与当前页面具有相同URL的链接，并将该链接指定为“活动”。这意味着该脚本必须在您链接到的每个页面上运行（尽管在外部JS文件中运行得很愉快）。谢谢。你的方法奏效了。结果，我没能平衡我的花括号。经过非常仔细的调查才发现，根本没有问题；很高兴能帮上忙！我没有得到+文件名+位。你能解释一下吗？你的意思是说。父（'li'）而不是父（'li'）？？@ngusum Javascript使用“+”来连接。e、 g:如果你有两个这样的变量：

var1='Hello'，var2='World'

你可以使用：

var1+var2

，它会打印出来：

HelloWorld

你使用了

parent（）.parent（）

，而不是这样做，你会使用

parents（“[selector]”）

，如果你知道你只遍历一个父对象，你可以使用

parent（）

。我用了你的代码，仍然无法按预期工作。我现在完全不知所措。