Как настроить элемент Navbar, чтобы он был активен по умолчанию до того, как пользователь щелкнет по ссылке Nav? - PullRequest
Новая
       15

Как настроить элемент Navbar, чтобы он был активен по умолчанию до того, как пользователь щелкнет по ссылке Nav?

0 голосов
/ 18 марта 2019

У меня есть сайт, над которым я работаю, и у меня настроены элементы nav, так что при нажатии на ссылку nav он меняет активный класс на ссылку, по которой вы щелкнули.

с этим сказано, как установить определенную ссылку, чтобы она была активной по умолчанию в навигационной панели?

Код: 

$(".nav-item a").on("click", function() {
  $(".nav-item a").removeClass("active");
  $(this).addClass("active");
});
.nav-item a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>

Я все еще новичок в javascript, поэтому любая помощь будет отличной (даже если она не работает)

Редактировать: Похоже, я не добавил достаточно деталей, извините.

Я бы хотел, чтобы домашняя навигационная ссылка оставалась активной до тех пор, пока пользователь не нажмет другую навигационную ссылку на другую часть страницы (я думаю о прокрутке различных частей сайта, но это совсем другой вопрос). Помня об этом, я хочу, чтобы функциональность сайта оставалась прежней, но активная ссылка по умолчанию изменялась при нажатии на другую ссылку.

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Просто добавьте активный класс к nav-ссылке 

$(".nav-item a").on("click", function() {
  $(".nav-item a").removeClass("active");
  $(this).addClass("active");
});
.nav-item a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>
0 голосов
/ 18 марта 2019

ваш код о клике, и вы не хотите его.Вы должны использовать 

$('.nav-item a').addClass("active");

в нерабочем теле клика: 

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>

CSS: 

.nav-item a.active 
{
color: red;
}

JAVASCIPT: 

<script>
$('.nav-item a').addClass("active");
</script>
...