Javascript 在新部分中使用CSS维护活动按钮的解决方案

我是javascript的初学者，我需要帮助解决我测试网站中的一个问题。 当我点击它们时，我需要一个带有活动按钮的顶部菜单。 对于这个例子，我只需要按钮1和2的活动css类。按钮3是指向mailto:的链接，按钮4是注销

我为活动类按钮找到了一个解决方案，但我赢得了一个新问题

HTML:

当我单击绿色部分链接时，顶部菜单上的活动css按钮消失。我需要按钮保持激活状态

我怎样才能解决这个问题？有什么意见吗

---

Thank's

这两个部分可以使用不同的类， i、 e:

---

本例中的绿色按钮应该有一个名为“green”的类。当然，您可以使用任何内容。

您可以为这两个部分使用不同的类， i、 e:

---

本例中的绿色按钮应该有一个名为“green”的类。当然，您可以使用任何东西。

您需要使用

location.pathname

和

location.search

：

$(function() {
    var pgurl;
        pgurl = location.search == '' 
                ? window.location.pathname.slice(1) 
                : location.pathname.split('?')[0];

    $('#nav a[href="'+pgurl+'"]').addClass('activ');
});

---

正如我所看到的，蓝色和绿色的导航过程是不同的。使用蓝色按钮，您可以使用

location.pathname

获得当前导航页面，如果您使用绿色按钮导航，则应使用

location.search

，与上述答案相同。

您需要使用

location.pathname

和

location.search

：

$(function() {
    var pgurl;
        pgurl = location.search == '' 
                ? window.location.pathname.slice(1) 
                : location.pathname.split('?')[0];

    $('#nav a[href="'+pgurl+'"]').addClass('activ');
});

正如我所看到的，蓝色和绿色的导航过程是不同的。使用蓝色按钮，您可以使用

location.pathname

获取当前导航页面，如果您使用绿色按钮导航，则应使用

location.search

，如上述答案所示。

使用此脚本

 $(function() {
    $('#nav ul').find('a[href="' + location.pathname + location.search + '"]').addClass('active');
  });

此外，你的脚本似乎很好，除了一个小的打字错误

$（this.addClass（“activ”）应该是
$（this）.addClass（“活动”）。您键入的是
activ
请使用此脚本

 $(function() {
    $('#nav ul').find('a[href="' + location.pathname + location.search + '"]').addClass('active');
  });

此外，你的脚本似乎很好，除了一个小的打字错误

$（this.addClass（“activ”）应该是
$（this）.addClass（“活动”）。您已经键入了
activ
请将各部分的HTML和单击处理程序Javascript添加到问题中。当您单击绿色部分时，绿色部分实际上做了什么？它是否使用不同的url重新加载页面？在这种情况下，它可能不再匹配。另外-与使用lastIndexOf相比，使用location对象提取要匹配的url部分可能更容易：-可能是location.pathname？我怀疑您无法匹配，因为您混合使用了路径名和查询字符串。清楚这一点可能会有所帮助。绿色部分是包含html和php代码的php页面。我使用php包含函数将这些页面放入index.php中。它有一个指向另一个页面（也包含在index.php中）的链接。请在问题中添加各部分的HTML和单击处理程序Javascript。当您单击绿色部分时，绿色部分实际上做了什么？它是否使用不同的url重新加载页面？在这种情况下，它可能不再匹配。另外-与使用lastIndexOf相比，使用location对象提取要匹配的url部分可能更容易：-可能是location.pathname？我怀疑您无法匹配，因为您混合使用了路径名和查询字符串。清楚这一点可能会有所帮助。绿色部分是包含html和php代码的php页面。我使用php包含函数将这些页面放入index.php中。它有一个指向另一个页面的链接（也包含在index.php中）。是的，我有两个不同的导航。蓝色部分是主要的导航按钮，绿色区域是带有其他页面链接的图像。当我进入BTN_1页面时，默认情况下该按钮处于活动状态。当我点击按钮BTN_2时，这将变为活动状态。如果单击绿色区域中的图像，我需要切换到另一个页面并保持BTN_2按钮处于活动状态。是的，我有两个不同的导航。蓝色部分是主要的导航按钮，绿色区域是带有其他页面链接的图像。当我进入BTN_1页面时，默认情况下该按钮处于活动状态。当我点击按钮BTN_2时，这将变为活动状态。如果我点击绿色区域中的图像，我需要切换到另一个页面并保持激活BTN_2按钮。
 $(function() {
    $('#nav ul').find('a[href="' + location.pathname + location.search + '"]').addClass('active');
  });