javascript - 导航栏中的外部 URL 在 Bootstrap 中不起作用

Question

最近设置了一个运行 Bootstrap 的主题作为我们的网站运行。一切正常，包括已放置在 HTML 中的外部 URL。

问题是，实际的导航栏并没有注册外部URL，点击时也不会打开它们。它被 JS“Magnific Popup”停止，但我不知 Prop 体原因。任何帮助将不胜感激。

这是网站的链接，错误的导航栏在右上角。

Rustoria Website

Answer 1

这通常是由 javascript 中的 preventDefault() 方法引起的。我相信导航最初是为锚定卷轴设计的。在 main.js 文件中，您会在第 62 行找到以下代码。

// Page Nav
var clickMenu = function() {

    $('#navbar a:not([class="external"])').click(function(event){
        var section = $(this).data('nav-section'),
            navbar = $('#navbar');

            if ( $('[data-section="' + section + '"]').length ) {
                $('html, body').animate({
                    scrollTop: $('[data-section="' + section + '"]').offset().top
                }, 500);
           }

        if ( navbar.is(':visible')) {
            navbar.removeClass('in');
            navbar.attr('aria-expanded', 'false');
            $('.js-fh5co-nav-toggle').removeClass('active');
        }

        event.preventDefault();
        return false;
    });


};

如您所见，函数正在阻止默认操作。阅读此函数后，您可以看到 jquery 选择器正在寻找 without “external” 类的标签。只需将“外部”类添加到 a 标签即可解决此问题。