html - 在 HTML/CSS 中设置选定的菜单项

Question

我有 3 个链接。当用户点击第一个链接(EQUIP1)时，我需要将其显示为已访问。然后剩下的两个链接显示为未访问过。然后，当用户选择第二个链接 (EQUIP2) 时，其余两个链接应显示为未访问。如果更改字体颜色以表明这是当前启用的链接，我没问题。

<tr align="center"> 
  <td class="mainTBSectionTab">                                                
     <a href="...">EQUIP1</a>
   </td>
   <td class="mainTBSectionTab">                                                                                    
     <a href="...">EQUIP2</a>
   </td>     
   <td class="mainTBSectionTab">                                             
     <a href="...">EQUIP3</a>
   </td>
</tr>

Answer 1

根据您提供的信息并假设您使用的是静态页面，您可以为每个页面的事件链接提供一个 .selected 类。

根据您的需要，您可以拥有这样的默认样式

.mainTBSectionTab
    color: #000
    text-decoration: none

.mainTBSectionTab.selected
    text-decoration: underline

那么您的 equip1.html HTML 文件将如下所示

<tr align="center"> 
    <td class="mainTBSectionTab selected">                                                
         <a href="...">EQUIP1</a>
    </td>
    <td class="mainTBSectionTab">                                                                                    
         <a href="...">EQUIP2</a>
    </td>     
    <td class="mainTBSectionTab">                                             
         <a href="...">EQUIP3</a>
    </td>
</tr>

在其他页面上，您可以在相应的链接上应用.selected 类来模拟选定链接的效果