Javascript 如何使按钮保持'；主动'；在他们'；重新点击？

我当前正在为我的菜单项使用以下代码：

HTML

我需要让按钮在点击和页面加载/刷新后保持“活动”状态

如果解决方案需要javascript，请记住我是一个业余爱好者，所以我需要外行的解释（最好用例子）

---

最好坚持使用CSS类和一些JS。通过这种方式，您可以混合伪类（：hover）和CSS类的两种样式

$('.myButtonLink').click(function() {
  $(this).addClass('active_class');
});

或者如果你想切换它

$('.myButtonLink').click(function() {
  $(this).toggleClass('active_class');
});

这样，如果布局中有任何更改，您只需更新该类中的CSS样式，而不必更新JavaScript代码

您可以使用window或localStorage元素来保持页面刷新的阶段性

var key = getStorageKeyFromLink(link);
window.activeStateLookup = window.activeStateLookup || {};
window.activeStateLookup[key] = {
  element : link
};

现在，当页面加载时，您只需更新所有图像即可：

window.onload = function() {
  var lookup = window.activeStateLookup || {};
  for(var key in lookup) {
    var element = lookup[key].element;
    element.addClass('active_class');
  }
}

---编辑---

这是你的演示

该示例使用localStorage，但对window对象也同样适用。一定要复制并粘贴代码，并在本地机器上进行测试，因为JSFIDLE有一些块与正在发生的事情相抵触

---

您可以使用一点

jquery

来查看

url

是什么，对其进行解析，然后将

active

类重新应用于相应的链接

也就是说（我还没有测试过这个……这更像是一个想法……）

---

您需要识别当前所在的页面

var page = window.location.href;
page = page.substr((page.lastIndexOf('/') + 1));
page = page.split('.');
page = page[0];
//At this point you will have the current page only with no extension or query paramaters
//I.E. "About Us"
page = page.toUpperCase();
//This accounts for upper or lower casing of urls by browsers.
switch(page) {
    case "ABOUT US":
        $('#About').addClass('< name of active button class >');
        break;
    case "SERVICES":
        $('#Services').addClass('< name of active button class >');
        break;
    case "CONTACT US":
        $('#Contact').addClass('< name of active button class >');
        break;
}

var page=window.location.href；
page=page.substr（（page.lastIndexOf（'/'）+1））；
page=page.split（'.'）；
第页=第[0]页；
//此时，您将只有当前页面，没有扩展或查询参数
//即“关于我们”
page=page.toUpperCase（）；
//这就解释了浏览器URL的大小写。
交换机（第页）{
案例“关于我们”：
$（“#About”）.addClass（“”）；
打破
案例“服务”：
$（“#服务”）.addClass（“”）；
打破
案例“联系我们”：
$（“#联系人”）.addClass（“”）；
打破
}

如果未使用jQuery，请替换此行：

$('#< element name >').addClass('< name of active button class >');

document.getElementById("< element name >").className += " < name of active button class >";

$（“#”）.addClass（“”）；

这一行：

$('#< element name >').addClass('< name of active button class >');

document.getElementById("< element name >").className += " < name of active button class >";

document.getElementById（“”）.className+=“”；

---

希望这能有所帮助。

我认为这个问题不值得-1。您希望它在页面加载之前保持活动状态，或者甚至在页面加载之后保持活动状态吗？后者要求您使用javascript获取URL（并非不可能）。常见的方法是对链接应用一个附加类，该类模仿

：hover

，您使用的是PHP还是其他任何东西？您正在寻找类似

：visted

？另请参见：我认为唯一可靠的方法是使用服务器端脚本或cookie。我需要让按钮在单击并加载/刷新页面后保持“活动”状态。为什么这是正确的？@Garry如果页面刷新，您将丢失刚才添加的类。我需要让按钮在单击并加载/刷新页面后保持“活动”状态。为什么这是正确的？@matsko这与Garry的示例没有相同的问题。一旦页面重新加载，DOM将被清除，这意味着您刚才添加的类将丢失且不相关。类不会停留在页面之间。只需使用localStorage来维护状态即可。或者使用窗口元素。@matsko-1。我不需要“切换”功能。因此，我是否需要实现您提供的第一、第三和第四个代码块？。2.既然这是我正在使用的类，我是否应该将“.myButtonLink”替换为“.button”？或者我应该替换为id，例如“About”？3.我是否应该将“活动类”替换为“.按钮：活动”？-请澄清。4.我是否需要将这3个代码块封装在标记中？我应该在哪里插入它们？我可以简单地将所有3个都包含在同一个标签中吗？我的帖子有点修补了，因为我更改和添加的东西太快了。看看我发布的演示。基本上，您可以将JavaScript代码放入它自己的文件中，并在前面使用脚本标记以及jquery的脚本标记将其包括在内。然后将CSS内容包含到它自己的文件中，并使用元素将其链接到页面。这样，只有他正在查看的页面才会有“活动”类。我认为他想让所有访问过的页面保持“活跃”@matheusaezevedo，这需要澄清。让你按下的每个按钮都处于活动状态是没有意义的。这将被视为访问。如果我在“联系我们”节目中，并且我来自“关于我们”，“联系我们”在访问“关于我们”节目时处于活动状态。如果这确实是我想要的，那么就使用：visted CSS标签样式。实际上，如果这个解决方案只导致当前页面处于“活动”状态，那么这正是我想要的。我不是JS专家…我到底需要在哪里插入上面的代码？此外，“”指的是什么？我应该用什么替换它吗？@LeonLawrence元素名将是按钮的id属性。（即“关于”、“服务”或“联系”）。就类而言，您可以放置您创建的CSS类的名称。上面的代码需要放在一个在DocumentReady上运行的节中<代码>$（document）.ready（函数（）{{u把代码放在这里}}）。对不起，我也应该问一下。您使用的是jQuery框架还是纯javascript？@LeonLawrence如果您不使用jQuery，您仍然可以确定文档何时准备就绪，并通过如下方式应用侦听器来应用此编码：`document.addEventListener（“DOMContentLoaded”，function（）{document.removeEventListener（“DOMContentLoaded”，arguments.callee，false）；<在此处添加上述代码>>，false）；可能看起来是个愚蠢的问题，但我

$('#< element name >').addClass('< name of active button class >');

document.getElementById("< element name >").className += " < name of active button class >";