BootStrap 3 上的导航栏间谍不允许外部链接
Navbar-spy on BootStrap 3 not allowing external links
一直在
尝试在我的导航栏末尾添加外部链接(例如博客),以及指向其他.html文件的额外下拉列表链接,但它就是不起作用。
这是代码。我应该修改什么以允许这些非 #links?
<div id="navbar-section" class="navbar navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-spy" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home"><i class="icon-home"></i></a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Infos <span class="caret"></span></i></a>
<ul class="dropdown-menu">
<li class="nav-header">Menu 1</li>
<li>
<a href="external1.html">external 1</a>
</li>
<li>
<a href="external2.html">external 2</a>
</li>
<li class="nav-header">Menu 2</li>
<li>
<a href="external3.html">external 3</a>
</li>
<li>
<a href="external4.html">external 4</a>
</li>
</li>
</ul>
</li>
</div>
</div>
</div>
顺便说一下,Dologan 在另一篇处理略有不同问题的帖子中给出了一个提示(也许?),但我不确定如何添加它以解决我的问题。
链接在这里 : 如何为引导程序的滚动间谍功能添加平滑滚动
感谢您的宝贵时间!
--更新--
我找到了问题出在哪里,自定义文件中的这段代码.js:
$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {
e.preventDefault();
var elmHash = $( this ).attr( 'href' );
var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
var windowOffsetTop = Math.ceil( $(window).scrollTop() );
if( elmOffsetTop != 0 ) {
elmOffsetTop = elmOffsetTop - 70;
if( windowOffsetTop == 0 ) {
elmOffsetTop = elmOffsetTop - 70;
}
}
//console.log( $( this ).attr( 'href' ) );
$( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );
});
评论整个部分解决了我的问题,但是我失去了漂亮的滚动效果。尝试了一些事情,但我无法使外部链接和滚动效果正常工作。
有什么想法吗?
你的问题没有说清楚你的问题是什么。外部链接没有哈希值,因此elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
会给出错误。
在 javascript 的开头添加if(!$( this ).attr( 'href' ).match(/^#/)) return;
以防止此错误:
$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {
if(!$( this ).attr( 'href' ).match(/^#/)) return;
e.preventDefault();
var elmHash = $( this ).attr( 'href' );
var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
var windowOffsetTop = Math.ceil( $(window).scrollTop() );
if( elmOffsetTop != 0 ) {
elmOffsetTop = elmOffsetTop - 70;
if( windowOffsetTop == 0 ) {
elmOffsetTop = elmOffsetTop - 70;
}
}
//console.log( $( this ).attr( 'href' ) );
$( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );
});
不要删除整个代码,因为您将丢失整个滚动动画,只需不调用函数就足够了e.preventDefault();
,删除它,一切都会好起来的。
相关文章:
- Don'不允许将焦点集中在自动完成的选择上
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- js文件未加载js控制台say's”;不允许加载本地资源”;
- Jquery不允许来自多个选择列表的相同值
- 飞行前响应中的访问控制允许标头不允许Angularjs请求标头字段访问控制允许标题
- 不允许在文本框中使用小数
- TinyMCE全屏不允许出现模式窗口
- 不允许在字段中输入不需要的字符
- 访问控制允许标头不允许X-Requested-Wise
- Chromium内联样式不允许正确的视图
- JQuery代码语法问题?(“不允许内联控制结构”)
- 正则表达式,不允许在javascript中使用负数和小数以及零
- 不允许输入或聚焦的输入类型文本
- $interval不允许我更新前端
- 不允许使用引导清单'组件'指令
- XMLHttpRequest无法加载url Origin访问控制允许Origin不允许null
- 正则表达式允许字母数字和空格,但不允许连续两个空格
- 谷歌地图 - 用户选择不允许位置
- 正则表达式在 JavaScript 中不允许
- BootStrap 3 上的导航栏间谍不允许外部链接