href没有链接到外部网址答案

【问题标题】：href not linking to external urlhref没有链接到外部网址
【发布时间】：2018-10-26 02:58:10
【问题描述】：

我下载了一个设计很奇怪的单页模板。所有超链接都链接到页面上的部分，并且使用 data-link="" 参数。

现在我尝试将其中一个菜单项链接到具有目标 _blank 的外部 url，但随后它正在寻找我在页面本身上定义的 url（因此它正在寻找不存在的部分，例如 www .example.com/http://google.nl)

链接在 href 元素上有一个值，如下所示：

href="/home/" or href="/menu/"

<ul id="w1" class="navbar-nav nav">
    <li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
    <li><a id="navmenu" class="" href="/menu" title="Menu" data-link="menu">Menu</a></li>

所以这不起作用（也没有目标_blank：

<li><a id="navorder" href="http://order.company.com" target="_blank">Order Now</a></li>

这里使用了什么技术？以及如何将新菜单项链接到外部页面？

编辑：

我找到了处理 href 的代码：

$(".menu ul li a").not('.social-link').click(function(e) {
    e.preventDefault();
    $(".menu ul li a").removeClass("active");

    tabTarget = $(this).data('link');
    animateByMenu = true;

    var hash = '#' + tabTarget;
    var url = $(this).prop('href');
    var menuItem = $(this).data('link');
    $(".menu li a[data-link=" + menuItem + "]").addClass("active");

    if (url) {
        var top = $(hash).offset().top - 60;
        $('html, body').animate({
            scrollTop: top
        }, 600, function(){

        });
        history.pushState('', '', url);
        $('.navbar-toggle:visible').click();
    }

    return false;

});

当我点击链接时，控制台中出现以下错误：

main.js:109 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:109)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)

【问题讨论】：

<a ... href="http://order.company.com" ...> ... </a> 应该可以正常工作...如果不能，您可以提供更多代码和上下文
删除 data_link 属性
Home

【解决方案1】：

应该有一段代码捕获所有“a”点击并阻止它们的默认行为。删除该数据属性并使用简单的href。应该可以的。

如果编码器如此严格，那么上面的解决方案可能不起作用。然后你应该做一些体操，比如使用 div 并附加一个点击处理程序。

【讨论】：

是的，我找到了请求处理程序

【解决方案2】：

因此，由于我们不知道您使用哪种模板，您可以使用这个：

<ul id="w1" class="navbar-nav nav">
    <li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
    <li><a onclick="window.open('http://www.google.com', '_blank')">Menu</a></li>
</ul>

这会将您重定向到新标签中的另一个页面。希望这对您有用，这只是一个简单的解决方法。

【讨论】：

好的，我要试试谢谢，顺便说一句，我找到了处理请求的代码

【解决方案3】：

好的，在这一行：

$(".menu ul li a").not('.social-link').click(function(e) {

您可以将一个类添加到您的链接 (.external-link) 并从选择中删除：

$(".menu ul li a").not('.social-link').not('.external-link').click(function(e) {

或者你可以更聪明一点，尝试根据href检查链接是否是外部的（代码只查找http，而不是https）：

$(".menu ul li a").not('.social-link').click(function(e) {
    if (e.target.href.indexOf('http://') !== 0) {
        e.preventDefault();
    }
...

【讨论】：

【解决方案4】：

发生的最明显的事情是 JavaScript 捕获所有链接（可能使用更具体的选择器），阻止默认操作（即跟随链接）并滚动到该部分。像这样的东西，在 jQuery 中。

$("a").each(function(i, el) {
  const $el = $(el);
  $el.click(function(e) {
    const href = $el.attr("href");
    // Find an element that has href as an ID
    // Scroll to that element
    $("html, body").scrollTop($("#" + href).offset().top);
    // Prevent default action, i.e., don't follow the hyperlink
    // to a new location
    e.preventDefault();
  });
});

在您的编辑之后。首先，这是一些糟糕的 JS imo。但是关于主题：如果您想要一些链接来实际打开一个新页面，请向它们添加一个新类。例如，使用 external 类作为外部链接。

<li><a id="navorder" href="http://order.company.com" target="_blank" class="external">Order Now</a></li>

并将 jQuery sn-p 的第一行更改如下，以便单击处理程序不附加到您的 .external 元素。

$(".menu ul li a").not('.social-link, .external').click(function(e) {

【讨论】：