引导导航链接不起作用 [英] bootstrap navigation links not working

问题描述

由于某种原因，我网站的标题/导航中的链接不起作用.我认为这与我使用的 CSS 有关系，但我完全按照 Bootstrap 文档站点上的代码进行操作.有人可以帮我解决这个错误吗?

您可以在此处查看完整站点:http://kaybesee.com/mb

这是我的 HTML:

<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200"><div class="容器"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
<!-- 收集导航链接、表单和其他用于切换的内容--><div class="" id="navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li class="nav-button"><a href="#portfolio">作品集</a></li><li class="nav-button"><a href="#about-us">关于我们</a></li><li class="nav-button"><a href="#contact">联系方式</a></li></div><!--/.navbar-collapse -->

</nav></div><!-- #nav-wrapper -->

解决方案

相信这是相关的，您的 li 单击 行上有一个 e.preventDefault36 在您的索引上.我真的看不出有什么原因，但由于您的锚点在里面，因此锚点点击事件永远不会触发.

删除 e.preventDefault();

 $('ul.nav > li').click(function (e) {e.preventDefault();

The links within my site's header/navigation aren't working for some reason. I think it has something to do with the CSS I am using but I have followed the code exactly like it is on Bootstrap's documentation site. Can someone help me fix this error?

You can view the full site here: http://kaybesee.com/mb

Here is my HTML:

<div id="nav-wrapper">
<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
    <a class="navbar-brand" href="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="" id="navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-button"><a href="#portfolio">Portfolio</a></li>
      <li class="nav-button"><a href="#about-us">About Us</a></li>
      <li class="nav-button"><a href="#contact">Contact</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div>
</nav>
</div><!-- #nav-wrapper -->

解决方案

Believe this is related, you have a e.preventDefault on your li click line 36 on your index. I don't really see a reason for that, but since your anchor is inside, the anchor click event never fires.

Remove e.preventDefault();

  $('ul.nav > li').click(function (e) {
        e.preventDefault();

这篇关于引导导航链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！