Question

My desired output after I click on a particular option 嗨，我在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 code：

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

`

Answer 1

结帐CSS :visited Selector

Answer 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移动“活动标签”。

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

2 个答案: