如何在導航中創建外部鏈接？ （HTML）

Question

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

我實際上是為我的網站使用一個模板，該模板具有一個隱藏的導航欄，僅在將鼠標懸停在“顯示菜單”按鈕上時才會顯示。

出於某種原因，當我嘗試在導航中添加外部鏈接時（通常應指向我的另一個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來獲取此鏈接，但由於缺少跨域權限而失敗。

我通過添加一個函數來解決此問題，該函數使用正則表達式檢查href是否為url，如果是，則使用window.location重定向頁面，否則將調用默認的ajax請求。

在您的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（'click'，function（e）{之后）

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

基本上，這是告訴瀏覽器如果域與當前域不同（即外部鏈接），則以預期的方式打開鏈接。