Set selected menu item in HTML / CSS

Question

I have 3 links. When user click on 1st link (EQUIP1), I need to show it as the visited. Then remaining two links show as not visited. Then when user select 2nd link (EQUIP2) the remaining two links should show as not visited. I'm ok if changing the color of font to sign that this is the current enabled link.

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

You mean you want to trick the user into thinking the links point to pages they haven't visited yet, even though they have? Why? — Mr Lister, May 27 '15 at 09:01
possible duplicate of [How to dynamically change the color of the selected menu item of a web page?](http://stackoverflow.com/questions/6239609/how-to-dynamically-change-the-color-of-the-selected-menu-item-of-a-web-page) — SidOfc, May 27 '15 at 09:30

score 0 · Answer 1 · answered May 27 '15 at 09:27

Based on the information you gave and assuming you are using static pages you could give each page's active link a .selected class.

based on what you want you could have default styling like this

.mainTBSectionTab
    color: #000
    text-decoration: none

.mainTBSectionTab.selected
    text-decoration: underline

Then your HTML file for equip1.html would look like this

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

On the other pages you would apply the .selected class on the corresponding links to simulate the effect of a selected link

Set selected menu item in HTML / CSS

1 Answers1