2016-11-03 2 views
0

У меня есть небольшая панель навигации на моем веб-сайте, и я понял, что ссылки не будут открываться при нажатии на них (Шаблоны/Ценообразование/регистрация/вход в систему). У кого-нибудь есть ключ?Ссылка href не открывается при щелчке левой кнопкой мыши

Вот код:

<nav class="navbar navbar-default navbar-static-top"> 
    <!-- color, statisch--> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse "> 
       <!-- button, navbar mit dropmenu wenn bildschirm zu klein--> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <!-- creates 3 lines in the toggle navigation when screen too little --> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="index.php">TAIL 
        <!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> --> 
      </a> 

     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="dropdown"> 
        <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a> 
       </li> 
       <li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up 
         <span class="glyphicon glyphicon-user" id="userIcon"></span> 
        </a> 
       </li> 
       <li class="dropdown"> 
        <a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In 
         <span class="glyphicon glyphicon-log-in" id="logIcon"></span> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div>   
</nav> 

Вот голова:

<head> 
    <title>Built your Website</title> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="style.css"> 

    <!--jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

</head> 
+0

Я сделал [скрипку] (https://jsfiddle.net/et8usoq3/) с HTML и добавил в загрузчике CDN и ссылки "работали", но так как У меня не было файлов, у меня 404 ошибки. Вы также получаете 404 ошибки или это просто, что ничего не происходит, когда вы нажимаете на них? – Sam07

+0

The Tail workss, но шаблоны, цены, регистрация/вход в систему, не будут работать Я не знаю, что вы имеете в виду, объясните пожалуйста – Nenad

+0

Ничто в этом коде не имеет видимой проблемы, вы должны получить сообщение об ошибке другой фрагмент связанного кода. –

ответ

0

Ее не работает из-за атрибута data-toggle="dropdown" с <a> тега. Когда вы используете этот атрибут, он предотвращает поведение по умолчанию ссылки и пытается открыть меню dropdown.

Для получения дополнительной информации проверить эту ссылку: http://getbootstrap.com/javascript/#dropdowns

Удалить этот атрибут из <a> тега, а также ненужные dropdown, dropdown-toggle и ваш код должен работать.

<nav class="navbar navbar-default navbar-static-top"> 
    <!-- color, statisch--> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse "> 
       <!-- button, navbar mit dropmenu wenn bildschirm zu klein--> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <!-- creates 3 lines in the toggle navigation when screen too little --> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="index.php">TAIL 
        <!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> --> 
      </a> 

     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li> 
        <a href="templates.php">Templates</a> 
       </li> 
       <li> <a href="pricing.php">Pricing</a> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="register.php">Sign Up 
         <span class="glyphicon glyphicon-user" id="userIcon"></span> 
        </a> 
       </li> 
       <li> 
        <a href="login.php">Log In 
         <span class="glyphicon glyphicon-log-in" id="logIcon"></span> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div>   
</nav> 

JSFIDDLE: https://jsfiddle.net/LLpfvcdu/

Смежные вопросы