如何在导航中创建外部链接？ （HTML）

Question

网站：http://www.viktor.ronnow.org/

我实际上在我的网站上使用了一个模板，该模板有一个隐藏的导航栏，只有当鼠标悬停在＆＃34; show-menu＆＃34;按钮。

出于某种原因，当我尝试在nav中添加外部链接时（通常应该通向我的其他tumblr博客），加载器开始旋转但不会重定向到tumblr。

我不知道是不是因为链接是外部的，或者是javascript中的内容。

这是我的代码：

<nav>
<ul>

    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80">
        <a href="../about/">VIKTOR RØNNOW</a>
    </li>

    <li id="menu-item-92" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-92">
        <a href="http://www.viktor.ronnow.org">PROJECTS</a>
    </li>

    <!-- The PROBLEM -->
    <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
        <a href="http://www.viktorronnow.tumblr.com">JOURNAL</a>
    </li>
    <!-- /The PROBLEM -->

    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79">
        <a href="../contact/">CONTACT</a>
    </li>

</ul>
</nav>

随意进入我的页面代码

所有文件：

http://www.mediafire.com/download/2pn2a0rhrh0sy29/viktorronnow-website.zip

Answer 1

在all.min.js中，所有导航链接点击都被阻止了他们的默认行为，并且他们使用原型类Ajax调用将他们的数据获取到一个主要部门。

当您放置外部链接时，它会尝试通过Ajax获取此链接，并且由于缺少cross-origin permissions而失败。

我必须通过添加一个函数来解决这个问题，该函数使用正则表达式检查href是否为url，如果是，则使用window.location重定向页面，否则将调用默认的ajax请求。 / p>

在all.min.js文件中，使用以下代码替换第1616-1633行Cass.prototype.goToPage函数定义：

function isUrl(s) {
   var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
   return regexp.test(s);
}

Cass.prototype.goToPage = function(url) {

 //console.log(isUrl(url));

  if(isUrl(url))
  {
     window.location = url;

  }
  else
  {
      $.ajax({
        url: url,
        method: 'GET',
        dataType: 'html',
        success: function(data) {
          var $data, newClasses, response;
          response = cass.preprocessAjaxResponse(data);
          $data = response.data.find('.wrapper');
          newClasses = response.classes;
          cass.wrapper.attr('class', newClasses);
          cass.main.html($data.find('main').html());
          cass.main.find('.overlay').hide();
          cass.init();
          cass.loader.delay(500).fadeOut(500);
        }
      });
  }
};

Answer 2

问题是您使用的模板假定您放入导航的所有链接都属于同一网站，因此不支持外部链接。当您单击链接时，该页面基本上发送一个ajax请求以获取新页面的内容并将其显示给用户并更新URL（搜索all.min.js以获取cass.goToPage）。为了让它以正常方式打开外部链接，在all.min.js的第1683行插入这一条简单的行（在cass.navLinks.on之后（＆＃39;点击＆＃39;，函数（e）{）< / p>

if($(this).attr('href').split('/')[2] != window.location.host) return;

基本上这样做是告诉浏览器如果域与当前域不同，即外部链接，则以预期的方式打开链接。