0

Всем добрый день! На данном ресурсе уже поднимался вопрос о присвоении класса при клике на ссылку. Так вот, у меня возник вопрос, следующий из ответа. Есть html код:

    <div id="selectBackground">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">Главная</a></li>
                            <li><a href="about.html">О нас</a></li>
                            <li><a href="service.html">Услуги и цены</a></li>
                            <li><a href="reference.html">Отзывы</a></li>
                            <li><a href="contact.html">Контакты</a></li>
                        </ul>  
</div>

и js код:

 $(function() {
  $("#selectBackground ul li a").click(function(e) {
    e.preventDefault();
    $("#selectBackground ul li a").removeClass('active');
    $(this).addClass('active');

  })
});

При клике на ссылку, происходит присвоение класса active, но перехода по ссылке нет. Подскажите, пожалуйста, что ещё нужно прописать в js, чтобы при клике ссылка срабатывала?

3
  • Нужно не прописать, а убрать e.preventDefault();
    – Cheg
    5 сен 2017 в 11:04
  • Тогда не происходит присвоение класса... 5 сен 2017 в 11:06
  • Как Вы узнаете есть ли присвоение класса, если Вы уходите со страницы? 5 сен 2017 в 11:14

1 ответ 1

1

Согласно официальной документации на метод event.preventDefault()

Description: If this method is called, the default action of the event will not be triggered.

Или на великом и могучем

Если этот метод вызван, то действие по-умолчанию не срабатывает

Но если убрать вызов этого метода, то произойдет переход по ссылке и Вы не увидите смену класса. Как вариант - открывать ссылку в новой вкладке

$(function() {
  $("#selectBackground ul li a").click(function(e) {
    e.preventDefault();
    $("#selectBackground ul li a").removeClass('active');
    $(this).addClass('active');
  });
});
.active {
  background-color: red
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectBackground">
  <ul class="nav navbar-nav">
    <li><a href="index.html" target="_blank">Главная</a></li>
    <li><a href="about.html" target="_blank">О нас</a></li>
    <li><a href="service.html" target="_blank">Услуги и цены</a></li>
    <li><a href="reference.html" target="_blank">Отзывы</a></li>
    <li><a href="contact.html" target="_blank">Контакты</a></li>
  </ul>
</div>

А вообще, похоже, JS здесь не нужен вообще. Класс должен устанавливаться сервером для конкретного элемента, когда сервер отдает конкретную страницу

1
  • Большое спасибо! 5 сен 2017 в 11:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.