Как добавить определенный класс к тегу привязки href, равный URL, используя jquery? - PullRequest
Новая
       7

Как добавить определенный класс к тегу привязки href, равный URL, используя jquery?

0 голосов
/ 21 ноября 2018

Я хочу иметь динамическое меню jQuery, которое перемещается к тегам a и к тому, которое iclude со страницей URL. 

$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() {
  var text = $(this).attr("href");
  if (window.location.href.includes(text)) {
    $('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
  } else {}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
  <li><a href="home">home</a></li>
  <li><a href="dashboard">dashboard</a></li>
  <li><a href="base">base</a></li>
  <li><a href="test">test</a></li>
</ul>

В этом коде есть изменение цвета во всех меню, которое должно изменить цвет меню в соответствии с адресом страницы.

Ответы [ 4 ]

0 голосов
/ 21 ноября 2018

Вы можете упростить ваш селектор и код и использовать .filter() вместо .each()

$('ul.navbar-nav li a').filter(function(){
  return window.location.href.includes($(this).attr('href'));
}).addClass('active');


window.location.href = "#home";
$('ul.navbar-nav li a').filter(function(){
  return window.location.href.includes($(this).attr('href'));
}).addClass('active');
.active {color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
  <li><a href="home">home</a></li>
  <li><a href="dashboard">dashboard</a></li>
  <li><a href="base">base</a></li>
  <li><a href="test">test</a></li>
</ul>
0 голосов
/ 21 ноября 2018

Просто удалите класс в другом: 

if (window.location.href.includes(text)) {
  $(this).addClass('active')
} else {
  $(this).removeClass('active')
}
0 голосов
/ 21 ноября 2018

Это работает, когда вы используете это, чтобы добавить класс.Я изменил один href на стек, потому что href фрагмента - это что-то вроде stacksnippet.Для этого элемента он окрашивается в красный цвет. 

$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() {
  var text = $(this).attr("href");
  if (window.location.href.includes(text)) {
    $(this).addClass('active')
  }
});
.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
  <li><a href="home">home</a></li>
  <li><a href="dashboard">dashboard</a></li>
  <li><a href="stack">base</a></li>
  <li><a href="test">test</a></li>
</ul>
0 голосов
/ 21 ноября 2018

Изменить 

if (window.location.href.includes(text)) {
  $('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
}

на 

if (window.location.href.includes(text)) {
  $(this).addClass('active')
}
...