如何实现网站导航栏链接打开时保持选中高亮状态？

Hey there! The problem with using :visited here is that it’s designed to style any link you’ve clicked before, not the link corresponding to the page you’re currently viewing. That’s why it’s not giving you the "active page" behavior you want. Here’s a straightforward, reliable fix:

Step 1: Add an active Class to Current Page Links #

On each of your HTML pages, add a custom active class to the navigation link that matches the current page. For example:

• On index.html:

<li><a href="index.html" class="active">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>

• On store.html:

<li><a href="index.html">Home</a></li>
<li><a href="store.html" class="active">Store</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>

Repeat this pattern for about.html and contact.html too—just add the active class to the link that points to the current page.

Step 2: Add CSS for the active Class #

Update your CSS to style the active class the same way your hover state looks (or tweak it if you want a slightly different active style):

ul li a {
  transition: 0.6s ease;
  text-decoration: none;
  color: #000000;
  padding: 5px 40px;
  border: 2px solid #000000;
  font-weight: 700;
}

ul li a:hover,
ul li a.active { /* Add the active class here */
  background-color: #000000;
  color: #ffffff;
}

/* You can remove the :visited rule since it's not serving your intended purpose */
/* ul li a:visited {
  background-color: #000000;
  color: #ffffff;
} */

Why This Works #

Unlike :visited, the active class is explicitly tied to the current page’s link. This ensures only the link for the page the user is on stays highlighted, no matter which links they’ve visited in the past.

Quick Bonus Tip #

That margin-top: -3.7% on your ul might cause layout issues on different screen sizes. Consider using flexbox for your header layout instead—it’s more responsive and predictable. For example:

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Add padding/margin as needed instead of negative margins */
}

内容的提问来源于stack exchange，提问作者Sprannn