Добавить класс “active” в тег <a> при изменении url

106

16 июня 2021, 17:00

Всем привет! Как добавить класс "active" в тег "a" при смене адреса? Ссылки такого формата

<div id="nav-side"> 
  <a href="http://site.com/one-page/second-page/">Second Page</a> 
</div>

Answer 1

$(document).ready(function () { 
  let loc = 'http://site.com/one-page/second-page/', // = window.location.href; 
    $a = $('#nav-side a'); 
  $a.each(function () { 
    if ($(this).attr('href') == loc) $(this).addClass('active'); 
  }); 
  console.log(loc); 
})

a{float:left;clear:both} 
.active{color:darkgreen;font-weight:700}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="nav-side"> 
  <a href="http://site.com/one-page/perviy-page/">Perviy Page</a> 
  <a href="http://site.com/one-page/second-page/">Second Page</a> 
</div>