Javascript 在我的引导模板上无法单击导航按钮

Javascript 在我的引导模板上无法单击导航按钮,javascript,html,templates,bootstrap-4,Javascript,Html,Templates,Bootstrap 4,我正在尝试将单页引导模板定制为多页模板。我复制了索引页面,然后将它们调整为服务等。我的href指向这些新页面,但导航栏按钮不可单击。我怀疑JS不是为多个页面构建的,但我不知道如何处理JS 如果这里有人愿意帮我看一下,代码/脚本是: ` var bigNavbarHeight=90; var smallNavbarHeight=68; var navbarHeight=bigNavbarHeight; $(文档).ready(函数(){ var-topOffset=180; $(窗口)。滚动(函

我正在尝试将单页引导模板定制为多页模板。我复制了索引页面,然后将它们调整为服务等。我的href指向这些新页面,但导航栏按钮不可单击。我怀疑JS不是为多个页面构建的,但我不知道如何处理JS

如果这里有人愿意帮我看一下,代码/脚本是:

`


var bigNavbarHeight=90;
var smallNavbarHeight=68;
var navbarHeight=bigNavbarHeight;
$(文档).ready(函数(){
var-topOffset=180;
$(窗口)。滚动(函数(){
if($(this).scrollTop()>topOffset){
$(“.navbar容器”).addClass(“粘性”);
}
否则{
$(“.navbar容器”).removeClass(“粘性”);
}
});
/*单页导航
-----------------------------------------*/
如果($(窗口).width()<992){
navbarHeight=小navbarHeight;
}
$('#tmNavbar')。singlePageNav({
'currentClass':“活动”,
偏移量:导航条高度
});
/*单击后折叠菜单
http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click
----------------------------------------------------------------------------------------*/
$('#tmNavbar')。在(“单击”,“a”,空,函数(){
$('#tmNavbar')。折叠('hide');
});
//调整窗口大小时处理导航偏移
$(窗口)。调整大小(函数(){
如果($(窗口).width()<992){
navbarHeight=小navbarHeight;
}否则{
navbarHeight=bigNavbarHeight;
}
$('#tmNavbar')。singlePageNav({
'currentClass':“活动”,
偏移量:导航条高度
});
});
/*滚动到顶部
http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation
--------------------------------------------------------------------------------------------------*/
$(“#转到顶部”)。每个(函数(){
$(此)。单击(函数(){
$('html,body')。动画({scrollTop:0},'slow');
返回false;
});
});
});

`

一般来说,引导超链接按钮不需要js就能正常工作

如果超链接按钮不起作用。。。你可能需要检查一些东西

  • 是否存在css冲突,导致按钮无法单击,z索引是一个常见问题

  • 是否有JS在您的超链接上调用e.preventDefault(),因为这会阻止正常行为

您可以在控制台中添加一点js来帮助调试
$('*')。单击(函数(e){console.log(e)})
,然后单击您的按钮并查看记录的内容,或者只需检查开发工具中的事件面板


更新:根据下面的评论。。。 好的,这实际上是JavaScript的问题,特别是“jquery.singlePageNav.min.js”JavaScript文件

问题就在这里:

handleClick: function( t ) {
        var n = this, r = t.currentTarget , i = e( r.hash );

            t.preventDefault(); <---- This prevents, the default behavior of anchor tags...
            
            if ( i.length ) {
                n.clearTimer();
                if ( typeof n.options.beforeStart === "function" ) {
                    n.options.beforeStart()
                }
                n.setActiveLink( r.hash );
                n.scrollTo( i, function() {
                    if ( n.options.updateHash && history.pushState ) {
                        history.pushState( null, null, r.hash )
                    }
                    n.setTimer();
                    if ( typeof n.options.onComplete === "function" ) {
                        n.options.onComplete()
                    }
                } )
            }
    }
handleClick:函数(t){
var n=this,r=t.currentTarget,i=e(r.hash);

t、 preventDefault();一般来说,引导超链接按钮不需要js来运行

如果你的超链接按钮不起作用…你可能需要检查一些东西

  • 是否存在css冲突,导致按钮无法单击,z索引是一个常见问题

  • 是否有JS在您的超链接上调用e.preventDefault(),因为这会阻止正常行为

您可以在控制台中添加一点js来帮助调试
$('*')。单击(函数(e){console.log(e)})
,然后单击您的按钮并查看记录的内容,或者只需检查开发工具中的事件面板


更新:根据下面的评论。。。 好的,这实际上是JavaScript的问题,特别是“jquery.singlePageNav.min.js”JavaScript文件

问题就在这里:

handleClick: function( t ) {
        var n = this, r = t.currentTarget , i = e( r.hash );

            t.preventDefault(); <---- This prevents, the default behavior of anchor tags...
            
            if ( i.length ) {
                n.clearTimer();
                if ( typeof n.options.beforeStart === "function" ) {
                    n.options.beforeStart()
                }
                n.setActiveLink( r.hash );
                n.scrollTo( i, function() {
                    if ( n.options.updateHash && history.pushState ) {
                        history.pushState( null, null, r.hash )
                    }
                    n.setTimer();
                    if ( typeof n.options.onComplete === "function" ) {
                        n.options.onComplete()
                    }
                } )
            }
    }
handleClick:函数(t){
var n=this,r=t.currentTarget,i=e(r.hash);

t、 preventDefault();让我们来。快速更新,我的小问题解决了,非常感谢您的帮助。让我们来。快速更新,我的小问题解决了,非常感谢您的帮助。
handleClick: function( t ) {
            var n = this, r = t.currentTarget , i = e( r.hash );

            if((t.target.href.replace( document.URL, '')).replace(location.protocol+'//', '')[0]  === '#'){ // <-- this will permit "non leading #" urls to behave normally.

                t.preventDefault();
                
                if ( i.length ) {
                    n.clearTimer();
                    if ( typeof n.options.beforeStart === "function" ) {
                        n.options.beforeStart()
                    }
                    n.setActiveLink( r.hash );
                    n.scrollTo( i, function() {
                        if ( n.options.updateHash && history.pushState ) {
                            history.pushState( null, null, r.hash )
                        }
                        n.setTimer();
                        if ( typeof n.options.onComplete === "function" ) {
                            n.options.onComplete()
                        }
                    } )
                }
            }

            
        }