.item { font-family: calibri; color: #b1b1b1; text-decoration: none; padding: 10px; } 
 <nav id="navigation"> <a class="item" href="index.php">Главная</a> <a class="item" href="popular-page.php">Популярное</a> <a class="item" href="catalog-page.php">Каталог</a> <a class="item" href="sale-page.php">Скидки</a> <a class="item" href="video-page.php">Видео</a> <a class="item" href="contact-page.php">Контакты</a> </nav>

enter image description here

There is such a menu, it is necessary that it was so, if the user is on the home.php page, that is, the main page, then the li element accepted its own color: #fff; And if on popular.php it is "popular", etc.

Closed due to the fact that the essence of the issue is not clear by the participants user194374, Dmitriy Simushev , cheops , Bald , lexxl Jul 29 '16 at 8:35 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Instead of a picture lay out better html. Otherwise, the answer will be absurdly banal. - Arnial pm
  • 2
    Not only html, but also an attempt to solve. - Visman
  • @Arnial is done. - Vanechka
  • 2
    read about window.location: check our location, create ifs, and use some kind of asset class that will highlight the necessary destination in the menu. In general, it is better to do backend. - NeedHate

1 answer 1

Good morning everyone. One option is how to do it.
1. At the beginning of each page, enter the element with the attribute:

  <div id="currentpage" data-currentpage="catalog"></div>

Where catalog is written, on each page you register the corresponding label.
2. Slightly change the menu:

 <nav id="navigation"> ... <a class="item" id="catalog" href="catalog-page.php">Каталог</a> <a class="item" id="video" href="video-page.php">Видео</a> ...

3. We write a small jQuery:

 (function(w){ var attribute = $('#currentpage').attr('data-currentpage'); $('#' + attribute).addClass('select'); })(this);

Again, this is one of the possible options.