如何使用 css 或 javascript 设置选定按钮/链接的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7024813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to style a selected button/link with css or javascript?
提问by xxx12123
I would like to style my selected button. I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.) I didn't have success with the css link selectors :visited, :focus, or :selected. Does this require a javascript solution? thanks for any pointers!
我想为我选择的按钮设置样式。我想在所选按钮的图像周围显示淡蓝色边框，以显示用户所在的页面。（或者只是在按下按钮时使用与所选按钮图像相同的悬停图像。）我没有成功使用 css 链接选择器 :visited、:focus 或 :selected。这是否需要 javascript 解决方案？感谢您的指点！
回答by blejzz
i usually just a extra class name called selected
我通常只是一个名为 selected 的额外类名
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
这取决于您如何显示页面（使用 ajax 或每次点击刷新）。如果您使用 javascript 加载页面内容，那么您只需在单击按钮时使用 javascript 放置一个额外的类名。
回答by Prashant Lakhlani
you should use :activepseudo class in css to achieve what you want.
你应该:active在 css 中使用伪类来实现你想要的。
回答by Wes Eklund
jQuery Solution with your CSS
带有 CSS 的 jQuery 解决方案
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
您可能想先检查它是否被选中，这样该解决方案就可以与 Twitter Bootstrap 之类的东西一起使用，您可以在其中使任何元素充当按钮：
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
回答by Andreas Eriksson
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
事实上，您将需要使用 javascript。不久前，我在一个项目中完成了此操作，方法是遍历导航栏中的链接，并在用户当前访问的链接上设置一个名为“selected”的类。
If you use jQuery, you can accomplish it like this:
如果你使用 jQuery，你可以像这样完成它：
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.
CSS Pseudo-selector :active 在页面重新加载后不会仍然处于活动状态。
