Почему при клике ссылка не открывается?

1183

26 ноября 2016, 18:51

Если я добавлю код 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>

Answer 1

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

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

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

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

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

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Flexbox и Internet Explorer 10 [закрыто]

Уважаемые, прошу поделиться опытом применения замечательной технологии Flexbox для всеми любимых браузеров Internet Explorer 10 и нижеНиже код и сразу...

502

CSS