时间戳

首页 > 解决方案 > built from scratch link menu

html - built from scratch link menu

问题描述

This is the first time I built a navigation menu from scratch and I can't get the active part to work. it should be if the home page is active it should be a different color but here that is not the case. Also, if you have any optimization ideas I'll take them. 

@media only screen and (max-device-width: 1540px) {
  .middle {
    margin: 0 auto;
    justify-content: center;
    display: flex;
  }
  .middle a {
    padding: 5px;
    color: pink;
    -webkit-transition: color 1.2s;
    -moz-transition: color 1.2s;
    -ms-transition: color 1.2s;
    -o-transition: color 1.2s;
    transition: color 1.2s;
  }
  .middle a:active {
    color: pink;
  }
  .middle a:hover {
    color: black;
  }
}
<nav>
  <div class="middle">
    <a href="/../Time%20out%20for%20Inc/Index/index.html" class="active">Home</a>
    <a href="/../Time%20out%20for%20Inc/contact/contacts.html">Contact Information</a>
    <a href="/../Time%20out%20for%20Inc/event/events.html">Activities</a>
    <a href="/../Time%20out%20for%20Inc/donations/donations.html">Ways You Can Help</a>
    <a href="/../Time%20out%20for%20Inc/application/applications.html">Application</a>
    <a href="/../Time%20out%20for%20Inc/video/videos.html">Videos</a>
    <a href="/../Time%20out%20for%20Inc/photo/photo.html">Photos</a>
    <a href="/../Time%20out%20for%20Inc/sponsor/sponsor.html">Sponsors</a>
  </div>
</nav>

标签： htmlcss

解决方案

:active is a CSS pseudo-class which applies when an element is being activated by the user. It specifies and selects an element based on a state—the active state—and is used to apply styles to an element when it matches that state.

When we click on the link, our web page refereshes and we navigate to another page. In this case :active will not work

You need to define active (any name) class, add styles for active link and assign it to the link of the displayed page.

For Example:

.active{
color: black;
}

If you want to asign .active class dynamically when URL changes. Check this article: https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

推荐阅读