Fatal编程技术网
  • javascript/
  • Javascript 香草引导导航栏链接不可点击

Javascript 香草引导导航栏链接不可点击

javascript jquery html css

Javascript 香草引导导航栏链接不可点击,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用一个普通版本的引导，并试图创建一个通用的模板，供朋友在他们的所有网站上使用。我以前使用过Bootstrap，没有任何问题，但现在我遇到了一个问题。澄清一下：据我所知，我根本没有修改引导js或css代码 问题是导航栏中的链接不可单击 HTML开头 <head> <title>Comic Title - Update Schedule</title> <meta charset="utf-8"> <meta name="vi

我正在使用一个普通版本的引导，并试图创建一个通用的模板，供朋友在他们的所有网站上使用。我以前使用过Bootstrap，没有任何问题，但现在我遇到了一个问题。澄清一下：据我所知，我根本没有修改引导js或css代码

问题是导航栏中的链接不可单击

HTML开头

<head>
  <title>Comic Title - Update Schedule</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <? require "walrus.php"; ?>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
     $('.navbar-nav a[href]').click(function (e) { e.preventDefault(); });
  });
  </script>
  <style>
  .affix {
    top: 0;
    width: 100%;
  }

  .affix + .container-fluid {
    padding-top: 70px;
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#00FF00;color:#fff;height:150px;">
  <h1>Example Header</h1>
  <h3>You'll probably want a cool image here.</h3>
</div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="150" style="z-index: 1001;">
  <ul class="nav navbar-nav">
    <li><a class="link" href="#">Home</a></li>
    <li><a class="link" href="http://www.google.com">About</a></li>
    <li><a class="link" href="http://www.google.com">Characters</a></li>
    <li><a class="link" href="page.php?p=archive">Archive</a></li>
  </ul>
</nav>


漫画标题-更新时间表
$（文档）.ready（函数（）{
$（'.navbar nav a[href]'）。单击（函数（e）{e.preventDefault（）；}）；
});
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}
示例标题
你可能会想要一张很酷的照片。

    

  • 

  • 

  • 

  •
我看过但没有工作（或不是永久解决方案）的帖子：
而且。

HTML中的脚本会阻止链接被单击

锚定标记在默认情况下是可点击的，但是jQuery函数使用的是事件方法preventDefault，它完全按照它所说的那样阻止锚定标记默认事件；可点击

祝你好运

$（文档）.ready（函数（）{$（'.navbar nav a[href]'）。单击（函数（e）{e.preventDefault（）；}）；}）；，请删除此选项，它将起作用。另外一个选项用于cat图像我已经修剪了一些注释（关于什么样的代码读取器希望看到）和指向您站点的链接，因为鉴于问题已经解决，这两个选项现在都是多余的（只要您在远程站点上解决问题，它将不再演示手头的问题）。这里最好的问题是为后代写的，而不是为临时要求写的——因此，如果你能在六个月内以一种可以理解的方式证明这个问题，那么未来的读者也可以从中学习。希望有帮助！不知何故，我已经跳过了这个脚本部分大约10次，可能是因为我还在学习javascript。谢谢