2016-11-03 14 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

私はあなたのhtmlで[フィドル](https://jsfiddle.net/et8usoq3/)を作り、ブートストラップCDNとリンクに追加 "働いていた" が、以来、あなたのファイルがありませんでした。私は404エラーがあります。 404エラーも出ていますか、それともクリックしても何も起こりませんか? – Sam07

+0

テールは動作しますが、テンプレート、価格設定、サインアップ/ログインは動作しません。 私はあなたの意思を理解していません。説明してください – Nenad

+0

このコードには何も目に見えない問題があります。関連するコードの別の断片。 –

答えて

0

その理由は<a>タグと属性data-toggle="dropdown"で働いていません。この属性を使用すると、リンクの既定の動作が妨げられ、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> 

JSFIDDLEhttps://jsfiddle.net/LLpfvcdu/

関連する問題