UL導航鏈接不按預期工作 - HTML/CSS

我有一個引導模板，我正在使用，但是一旦我準備好開始鏈接頁面，我注意到到UL中的其他頁面的鏈接不工作我期望。我通過網站搜索，嘗試了一些修復和帖子，但沒有運氣。此外，如果任何人都可以看到它，我還有第二個問題，這個時候沒有那麼緊迫，但是當你點擊漢堡包圖標時，動態化的菜單版本會展開，但不會收回。任何見解都非常感謝。先謝謝你！UL導航鏈接不按預期工作 - HTML/CSS

.navigation { 
 
\t min-height: 70px; 
 
    } 
 

 
    .navigation .navbar { 
 
\t border: none; 
 
\t margin-bottom: 0; 
 
\t min-height: 70px; 
 
    } 
 
    .navigation .navbar .navbar-brand { 
 
\t color: #fff; 
 
\t font-size: 40px; 
 
\t font-weight: 700; 
 
\t height: 70px; 
 
\t line-height: 35px; 
 
    } 
 
    .navigation .navbar-default { 
 
\t background-color: #0091D5; 
 
\t box-shadow: 0 0px 10px rgba(0,0,0,.2); 
 
\t border: none; 
 
\t border-radius: 0; 
 
\t clear: both; 
 
    } 
 
    .navigation .navbar-default .navbar-nav>li>a { 
 
\t color: #fff; 
 
\t font-weight: 500; 
 
\t padding-top: 25px; 
 
\t padding-bottom: 25px; 
 
    } 
 

 
    .navigation .navbar-default .navbar-nav>li>a:hover, 
 
    .navigation .navbar-default .navbar-nav>.active>a, 
 
    .navigation .navbar-default .navbar-nav>.active>a:hover, 
 
    .navigation .navbar-default .navbar-nav>.active>a:focus { 
 
    \t background: none; 
 
    \t color: #FFFFFF; 
 
    } 
 
    .navigation .btn-default:hover, 
 
    .navigation .btn-default:focus, 
 
    .navigation .btn-default:active, 
 
    .navigation .btn-default.active { 
 
\t border-color: transparent; 
 
    }

<section id="menu"> 
 
     <div class="navigation"> 
 
     <div id="main-nav" class="navbar navbar-default" role="navigation"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
      
 
      </div> <!-- end .navbar-header --> 
 

 
      <div class="navbar-collapse collapse"> 
 
       <ul id="ulnav" class="nav navbar-nav"> 
 
       <li><a href="index.html" target="_parent">&nbsp;&nbsp;Home</a></li> 
 
       <li><a href="water-damage.html" target="_parent">Water Damage</a></li> 
 
       <li><a href="#">Fire Damage</a></li> 
 
       <li><a href="#">Drying Services</a></li> 
 
       <li><a href="#">Restoration</a></li> 
 
       <li><a href="#">Commercial</a></li> 
 
       <li><a href="#">Reviews</a></li> 
 
       <li><a href="#">Insurance & Financing</a></li> 
 
       <li><a href="#">About Us</a></li> 
 
       <li class="cwaf-bg"><a href="#">Free Estimate</a></li> 
 
       </ul> 
 
      </div><!-- end .navbar-collapse --> 
 

 
      </div> <!-- end .container --> 
 
     </div> <!-- end #main-nav --> 
 
     </div> <!-- end .navigation --> 
 
    </section>

來源

2017-08-07 sb-cwaf

*「我注意到，鏈接到UL中的其他頁面都沒有工作，我期待」 *究竟是什麼問題？目前發生了什麼以及您期望發生什麼？ –

基本導航一旦添加一個href鏈接，它不會改變頁面。我有我的主頁針對索引和第二頁water-damage.html和導航欄只是不工作。 –

一切似乎都適合我，鏈接和菜單切換https://codepen.io/mcoker/pen/OjpNKe –

是否包含自舉？

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

來源

2017-08-07 21:44:09

是的，都添加了。 –

問題已在註釋部分解決。這個實例與預先打包的一個頁面模板有關，它在默認的JS庫中進行了導航修改。

來源

2017-08-07 22:21:56

請執行這些步驟。

首先你必須加載bootstrap.added這些鏈接到頭部。

<head> 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

</head>

然後您可以將這些代碼部分添加到正文部分。

<body> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 




<!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="index.html" target="_parent">&nbsp;&nbsp;Home</a></li> 
      <li><a href="water-damage.html" target="_parent">Water Damage</a></li> 
      <li><a href="#">Fire Damage</a></li> 
      <li><a href="#">Drying Services</a></li> 
      <li><a href="#">Restoration</a></li> 
      <li><a href="#">Commercial</a></li> 
      <li><a href="#">Reviews</a></li> 
      <li><a href="#">Insurance & Financing</a></li> 
      <li><a href="#">About Us</a></li> 
      <li class="cwaf-bg"><a href="#">Free Estimate</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 



</body>

我檢查此cord.it的作品沒有任何issue.i附加快照also.please檢查它。

來源

2017-08-08 07:33:41

UL導航鏈接不按預期工作 - HTML/CSS

回答

相關問題