javascript 单击后如何使按钮保持“活动状态”？

How to make buttons remain 'active' after they're clicked?

提问by OCD

I'm currently using the following code for my menu items:

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

HTML

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

I need to get the buttons to remain in the 'active' state after they're clicked and the page loads/refreshes etc.

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

If the solution requires javascript, please bear in mind that I'm a rank amateur so I'll need any explanations in layman's terms (preferably with examples).

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

采纳答案by War10ck

You need to identify the page you are currently on.

您需要确定您当前所在的页面。

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;
}

If you're not using jQuery replace this line:

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

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

with this line:

用这一行：

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

Hope this helps.

希望这可以帮助。

回答by matsko

Best just to stick to using CSS classes with some JS. This way you can mix both styles for the pseudoclass (:hover) as well as the CSS class.

最好只是坚持在一些 JS 中使用 CSS 类。通过这种方式，您可以混合伪类 (:hover) 和 CSS 类的两种样式。

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

Or if you want to toggle it.

或者如果你想切换它。

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

This way if there any changes in your layout, you only have to update the CSS styles that are apart of that class and not have to update your JavaScript code.

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

You can use the window or localStorage element to keep stage across page refreshes.

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

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

Now when your page loads you can just update all the images:

现在，当您的页面加载时，您可以更新所有图像：

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

--- EDIT ---

- - 编辑 - -

Here's your DEMO.

这是您的演示。

The example uses localStorage, but it would work the same with the window object. Be sure to copy and paste the code and try it out on your local machine since jsfiddle has some blocks against what's going on.

该示例使用 localStorage，但它与 window 对象的工作方式相同。请务必复制并粘贴代码并在您的本地机器上试用，因为 jsfiddle 有一些阻止正在发生的事情。

http://jsfiddle.net/GDXLb/7/

http://jsfiddle.net/GDXLb/7/

回答by Darren Wainwright

You could use a little jqueryto see what the urlis, parse it and then re-apply the activeclass to the appropriate link.

您可以稍微jquery看看url它是什么，解析它，然后将active类重新应用到适当的链接。

I.E ( i haven't tested this... it's more of an idea...)

IE（我还没有测试过这个......这更像是一个想法......）

var path = window.location.pathname;

$(a).each(function(){
    if (path.indexOf($(this).prop("href")) > 0){
        $(this).child("button").addClass("active");
        break;
    }
});

回答by Garry

$('.myButtonLink').click(function() {
 $(this).css('background-position', '0 0');
});

DEMO

演示