单击后如何使 css a:active 工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7566238/
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 make css a:active work after the click?
提问by Pyracell
I am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:activebut it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.
我正在尝试使菜单作为选项卡工作。选项卡本身工作正常，菜单链接也很好.. 但我想删除活动选项卡的底部边框，使其看起来像在实际页面上。我试过使用，#id a:active但它似乎只在我按下链接时才起作用。我也有过用 javascript 来做的想法，但我似乎无法找到一种方法来做到这一点。这是我的主动 css。
CSS: (please let me know if you'll need more of my css)
CSS：（如果您需要更多我的CSS，请告诉我）
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Thanks, /Pyracell
谢谢，/Pyracell
采纳答案by Dan
From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code. Something in the lines of:
从您对另一个答案的评论中的演示链接来看，JavaScript 没有任何帮助，它应该在您的 PHP 代码中完成。在以下方面的东西：
<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
TAB_NAME
</a>
Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD
提到更改选项卡正在重定向到另一个页面可能有助于从一开始就获得更好的响应 xD
Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selectedto a code that returns truefor the selected tab.
根据您的代码以及您创建选项卡的方式，您需要将 更改为为所选选项卡this_tab_is_selected返回的代码true。
P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:activeto #navigation a.active)
PS您仍然需要在CSS中的另一个答案中进行修改。（要更改#navigation a:active为#navigation a.active）
回答by Gabriele Petrioli
Add and remove a class when you select a tab link..
选择选项卡链接时添加和删除类。
#navigation .active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
and use the script (jQuery version)
并使用脚本（jQuery 版本）
$(function(){
$('#navigation a').click(function(){
$('#navigation .active').removeClass('active'); // remove the class from the currently selected
$(this).addClass('active'); // add the class to the newly clicked link
});
});
回答by Guy Bedford
A crude way to do this with JavaScript (jQuery)
使用 JavaScript (jQuery) 执行此操作的粗略方法
$('a[href]').each(function() {
if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
$(this).addClass('active');
});
回答by Jez
How are you implementing the tabs; as multiple different HTML pages? The :activepseudo-class does indeed only apply when a link is 'active', which generally means 'being clicked on'. If you're implementing the tabs as multiple HTML pages, you'll probably want to assign a CSS class like "CurrentTab" to the tab representing the page the user is currently on, and apply your border-bottom-width:0pxto that class.
你是如何实现标签的；作为多个不同的 HTML 页面？该:active伪类，当一个链接是“积极的”，“被点击”这通常意味着确实只适用。如果您将选项卡实现为多个 HTML 页面，您可能希望为代表用户当前所在页面的选项卡分配一个像“CurrentTab”这样的 CSS 类，并将您的应用应用于border-bottom-width:0px该类。
回答by Jags
the practice which is usually followed is to apply a class to your currently selected tab,e.g. class="selected" and then modify your css to target that class
通常遵循的做法是将一个类应用于您当前选择的选项卡，例如 class="selected" 然后修改您的 css 以定位该类
#navigation a.selected
回答by Niko
This is not how it works. The :active selector matches (as you noticed) a link that is currently getting clicked (= is active/working). What you want, is a selector for the active page. You will need to use a normal css class there, like this:
这不是它的工作原理。:active 选择器匹配（如您所见）当前被点击的链接（= 活动/工作）。您想要的是活动页面的选择器。您将需要在那里使用普通的 css 类，如下所示：
#navigation a:active, #navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
回答by lukehillonline
Things like this need to be done with an if statement using code such as PHP.
像这样的事情需要使用诸如 PHP 之类的代码通过 if 语句来完成。
For example if you click a link you get your new page, set a page variable, something like:
例如，如果您单击一个链接，您将获得新页面，请设置一个页面变量，例如：
$page = "Home";
Then use an if statement to add or remove extra CSS classes/ids to chnage the style e.g.
然后使用 if 语句添加或删除额外的 CSS 类/id 以更改样式，例如
if ($page == "home")
{
<a href="home.php" class="active">Home</a>
<a href="about.php">About</a>
}
else if ($page == "About")
{
<a href="home.php">Home</a>
<a href="about.php" class="active">About</a>
}
回答by paidforbychrist
I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.
我参加聚会有点晚了，但我只使用 css 有一个简单的答案。给每个页面一个唯一的 id，给每个菜单项一个唯一的 id（在这种情况下是类），当你不在页面上时，根据你喜欢的样式设置链接的样式，如果你在页面上，则根据需要设置样式. 当您单击菜单项并加载页面时，css 会匹配。因此，无论您在哪个页面上，菜单项都会显示为“活动”。下面我将其用于当前页面菜单按钮文本更改颜色的位置，但您可以使用可见属性来显示和隐藏图像或使用任何 css 对其进行样式设置。（在这个例子中也是用 css 来改变悬停时的东西。）此外，这个方法允许你为每个菜单按钮编写单独的 css，所以如果你愿意，每个菜单按钮可以做一些与其他菜单不同的事情。
#menu {
padding-top: .5em;
text-align: center;
font-family: 'Merriweather Sans';
font-size: 1.25em;
letter-spacing: 0;
font-weight: 300;
color: #003300;
}
#menu a {
text-decoration: none;
color: #003300;
}
#menu a:visited {
color: #003300;
}
#menu a:hover {
font-style: italic;
}
#home a.home,
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
font-weight: 800;
color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
font-style: normal;
}
