Если URL содержит VALUE, добавьте класс для ссылки + ROOT

Question

Я хотел бы добавить активную ссылку на свою навигацию в зависимости от URL, используя vanilla JS.

Моя навигация выглядит следующим образом:

 <div id="navi">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
 </ul>
</div>

JS выглядит следующим образом:

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.indexOf(link[i].href) != -1) {
     link[i].className='active';}
 }}
window.onload = Activelink;

Работает хорошо, тем более что он также добавляет класс "активный" к ссылке в блоге, даже если к блогу обращаются.Единственная проблема в том, что <a href="/">Home</a> постоянно получает назначенный класс "активный".Есть ли способ избежать этого, чтобы класс домашней ссылки был «активным» только при доступе к домашней странице?

Answer 1

Прежде всего, добро пожаловать в переполнение стека!Ответ немного зависит от вашей будущей концепции сайта и от того, есть ли у вас URL, которых нет в вашей навигации.Например, если у вас есть какая-то страница с информацией об авторских правах, доступная в / копирайт, связанная в нижнем колонтитуле, но не в вашей навигации, что тогда следует выделить?Домашняя запись?Въезд запрещен?Кроме того, я предполагаю, что / блог и / контакт также могут иметь подстраницы?Как / blog / what-ever?

Таким образом, независимо от угловых случаев в будущем, простым решением было бы обратить цикл for и добавить разрыв в условие if: (Обратите внимание, я изменил / blogв / js, потому что это часть URL, в котором выполняется этот тестовый фрагмент.)

function activeLink() {
    link = document.getElementById('navi').getElementsByTagName('a');
    for(i = link.length - 1; i >= 0; i--) {
       if(document.location.href.indexOf(link[i].href) != -1) {
           link[i].className='active';
           break;
    }
}}
window.onload = activeLink;

a.active{
   background-color:red;
}

 <div id="navi">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/js">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
 </ul>
</div>

Теперь ваш цикл for проверяет, если window.location.href содержит /contact, то, если он соответствует разрыву, пропускает все последующие выполнения вашего цикла.В противном случае он будет искать /blog и только если ни одно из первых двух выполнений не будет совпадать, он выберет /, так как это всегда будет частью URL.Надеюсь это поможет!

Answer 2

Вы можете использовать endsWith вместо indexOf:

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.endsWith(link[i].href)) {
     link[i].className='active';}
 }}
window.onload = Activelink;