0

Если я добавлю код JS, который при клике добавляют класс active, тогда у меня ссылки не работают. А если без JavaScript у меня все работает.

Вот пример кода:

<html>
<head>
  <meta charset="utf-8 ">
  <title></title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="style5.css">
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css">
  <script>
    $(document).ready(function(){
    $("li").click(function(e) {
      e.preventDefault();
      $("li").removeClass('active');
      $(this).addClass('active');
    });
    });
  </script>
</head>
<body>
<nav id="navbar" class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-        target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index2.php">Main</a></li>
        <li><a href="index2.php">Main</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle"  data-toggle="dropdown">Dropdown   <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="index5.php">a</a></li>
            <li><a href="bank.php">b</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

1 ответ 1

1
$("li").click(function(e) {
      e.preventDefault();
      ...

e.preventDefault() обрывает все действия. Т.к. ваши ссылки вложены в <li> элемент, то это правило распространяется и на его детей т.е. на <a>.

для этого проверяйте, действительно ли клик произошел по элементу <li>

if (event.target !== this) { ... }

Либо перепешите логику вашего приложения скрипта так, чтобы такого не случалось. Например удалите e.preventDefault();

3
  • если без preventDefault тогда у меня не будет добавляться класс active
    – user223384
    15 окт 2016 в 6:51
  • будет. Это видно из кода. Давайте отвечу за вас. Вы кликаете по ссылке и переходите на новую страницу. В это время li получает класс active, но т.к. осуществляется переход на новую страницу, которая ничего не знает об активном li. Всё это дело херится. Если вы ставите preventDefault() то класс li успешно добавляется, но переход не происходит т.к. вы это запретили. ГДЕ ВАША ЛОГИКА ?
    – ArchDemon
    15 окт 2016 в 8:34
  • Класс active, должен добавляться на стороне сервера. То что делаешь ты это костыли.... в данном случае необходимо тогда перенаправить страницу window.location = link.href , где link.href ничто иное как link = event.target.querySelector('a'). Далее после перехода обратиться к адресной строке, посмотреть что там и затем в цикле сравнить со значением href ссылок. при совпадении добавить нужный класс. Но это как я уже ранее говорил костыль и такие вещи делаются на сервере.
    – pepel_xD
    15 окт 2016 в 17:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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