用于更改刚刚单击的标记外观的 CSS 代码答案

【问题标题】：CSS code for changing the appearance of a tag being just clicked用于更改刚刚单击的标记外观的 CSS 代码
【发布时间】：2014-12-29 21:12:00
【问题描述】：

嗨，我不太擅长css。我想创建一个页面，在单击菜单选项后，该选项的边框底部变为蓝色。我当前的代码适用于鼠标悬停和活动，但在我离开鼠标后不起作用。 CSS 代码：

body
{
    background-image: url("images/temp1.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.container 
{
    text-align: center;
}

.center_div 
{
    margin-left: 12%;
    width: 75%;
    height: 100%;
    background-color: #ffffff;
}
td.mainmenu
{
    border-style: hidden;
    width: 15%;
    height: 10%;
    border-collapse: separate;
    border-spacing: 3%;
    padding:20px;
    padding-left:60px;
}
a.mainmenu
{
    text-decoration:none;
    color: black;
}
td.mainmenu:hover
{
    border-bottom-style:solid;
    border-bottom-color:blue;

}

HTML 代码：

<html>
<head>
<link rel="stylesheet" href="admin_template.css">
</head>
<body>
<div class="container">
  <div class="center_div">
 <table class="mainmenu">
 <tr>
<td class='mainmenu'><a class='mainmenu' href="">Sales</a></td>
<td class='mainmenu'><a class='mainmenu' href='out_of_stocks.php'>Out of Stocks</a></td>
<td class='mainmenu'><a class='mainmenu' href='refill_stock.php'>Refill Stocks</a></td>
<td class='mainmenu'><a class='mainmenu' href='enter_product.php'>New products</a></td>
<td class='mainmenu'><a class='mainmenu' href='admin_so.php'>Sign Out</a></td>
</tr>
<table>
<hr/>
</div>
</div>
</body>
</html>

【问题讨论】：

CSS: How to change colour of active navigation page menu 的可能重复项
这篇文章也可能是相关的：stackoverflow.com/questions/7566238/…

标签： html css

【解决方案1】：

结帐CSS :visited Selector

【讨论】：

另外，:visited 将适用于用户访问过的所有页面，一段时间后可能是所有页面，所以不是很有用。
@rjmike29 是的，:visited 选择器仅用于 a 元素，用于“已访问”链接。如果您指向刚刚单击的最后一个选项卡，则它超出了 CSS 选择器的范围，它不提供像 最后一个刚刚单击的选项卡那样的语义。您需要一个名为 just-clicked 的新类，并使用一点点 javascript 来分配它。
@rjmike29 看看bootstrap tabs，其中一个类active用于表示语义刚刚点击

【解决方案2】：

您可以选择具有空白href的链接：

a.mainmenu[href=""] { border-bottom-style:solid; border-bottom-color:blue }

但这可能不是一个好主意。让模板引擎标记活动选项卡可能会更好。

例如，如果您在销售页面上，第一个单元格将显示为<td class="mainmenu active-tab"，您将添加到您的 CSS 文件中：

.active-tab { border-bottom-style:solid; border-bottom-color: blue }

这样，您可以在以后需要时使用 javascript 移动“活动标签”。

【讨论】：