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

回答

相关问题