香草引导程序导航栏链接不可点击
Vanilla Bootstrap Navbar links not clickable
我正在使用Bootstrap的普通版本,并试图为朋友创建一个通用模板,以便在他们的所有网站上使用。我以前使用Bootstrap没有任何问题,但现在有一个问题。澄清一下:据我所知,我根本没有修改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>
我看过的帖子没有起作用(或者不是永久解决方案):1和2。
HTML中的脚本阻止了链接的可点击性。
锚定标签默认情况下是可点击的,但是您的jQuery函数使用的是事件方法preventDefault,它完全按照它所说的做,阻止锚定标签的默认事件;可点击。
祝你好运!
相关文章:
- 文本链接可更改引导程序选项卡
- 单击链接时如何将引导程序转盘旋转到特定位置
- Angular UI&引导程序:点击链接时折叠移动导航栏
- 如何在grails中链接javascript引导程序方法
- 第二个引导程序导航栏链接打开第一个(错误的)导航栏;jquery
- 为什么所有链接都在带有引导程序的新选项卡中打开
- 如何在引导程序中使选项卡可链接
- 从按钮(不是导航栏)链接到引导程序部分id
- href指向未在同一页面上激活的引导程序导航选项卡的链接
- 将下拉菜单与引导程序中的选项卡链接
- 香草引导程序导航栏链接不可点击
- 在移动设备上单击链接之前引导程序下拉菜单崩溃
- 引导程序导航条活动链接
- 链接到引导程序导航选项卡内的ID
- 确定在当前页面中哪个链接引导您
- href链接未打开,引导程序在单击时将打开类添加到下拉菜单,而不是打开链接
- 一个页面中不同引导程序转盘幻灯片的不同链接
- 活动链接在引导程序上不起作用
- 显示在引导程序导航栏中添加时动态添加的导航链接
- 宣布网页为mailto链接处理程序