在頁面上使用直接URL鏈接打破標籤選項卡上的URL點擊

Question

我試圖在我的頁面中創建一個選項卡區域。這些標籤頁導航隱藏的區域而不用離開頁面。我也希望能夠鏈接到頁面中的某個區域。它的工作原理除了當你點擊菜單以及顯示隱藏區域時，它只改變標籤擴展名來重寫URL，因此破壞了URL的鏈接。所以有人試圖分享鏈接將不知道格式..

我使用這個代碼https://css-tricks.com/examples/OrganicTabsReplaceState，我認爲沒有問題。

你可以看到一個現場演示，我的問題在這裏：http://bit.ly/1IP1ST4

單擊該選項卡中刪除： /產品/ EURORACK模塊/波形修飾語/無功整形器/

並與替換它？tab = mytabname

它應該簡單地添加它。我正在努力解決爲什麼..？

Answer 1

這個版本的organictabs.jquery.js讓它工作到最後似乎是它處理URL的方式的問題..也許這會幫助別人。

// IIFE 
(function($) { 

    // Define Plugin 
$.organicTabs = function(el, options) { 

     // JavaScript native version of this 
    var base = this; 

    // jQuery version of this 
    base.$el = $(el); 

    // Navigation for current selector passed to plugin 
    base.$nav = base.$el.find(".nav"); 

    // Returns the fragment identifier of the given URL 
    function getFragmentIdentifier(url) { 
     if(url && url.match && url.match(/#(.*)/)) { 
      return RegExp.$1; 
     } 
    } 

    // Remove the query string from the url 
    function noQueryString(url) { 
     if(url && url.match && url.match(/^([^\?]*)\??/)) { 
      return RegExp.$1; 
     } 
    } 

    // Runs once when plugin called  
    base.init = function() { 

      // Pull in arguments 
     base.options = $.extend({},$.organicTabs.defaultOptions, options); 

     // Accessible hiding fix (hmmm, re-look at this, screen readers still run JS) 
     $(".hide").css({ 
      "position": "relative", 
      "top": 0, 
      "left": 0, 
      "display": "none" 
     }); 

     // When navigation tab is clicked... 
     base.$nav.delegate("a", "click", function(e) { 

       // no hash links 
       e.preventDefault(); 

      // Figure out current list via CSS class 
      var curList = getFragmentIdentifier(base.$el.find("a.current").attr("href")), 
      // List moving to 
       $newList = $(this), 

      // Figure out ID of new list 
       listID = getFragmentIdentifier($newList.attr("href")), 

      // Set outer wrapper height to (static) height of current inner list 
       $allListWrap = base.$el.find(".list-wrap"), 
       curListHeight = $allListWrap.height(); 
        $allListWrap.height(curListHeight); 


      if ((listID != curList) && (base.$el.find(":animated").length == 0)) { 
       // Fade out current list 
       base.$el.find("#"+curList).fadeOut(base.options.speed, function() { 

        // Fade in new list on callback 
        base.$el.find("#"+listID).fadeIn(base.options.speed); 

        // Adjust outer wrapper to fit new list snuggly 
        var newHeight = base.$el.find("#"+listID).height(); 
        $allListWrap.animate({ 
         height: newHeight 
        }, base.options.speed); 

        // Remove highlighting - Add to just-clicked tab 
        base.$el.find(".nav li a").removeClass("current"); 
        $newList.addClass("current"); 

              // Change window location to add URL params 
              if (window.history && history.pushState) { 
               // NOTE: doesn't take into account existing params 
               history.replaceState("", "", noQueryString(window.location.href) + "?" + base.options.param + "=" + listID); 
              }  
       }); 

      } 

     }); 

     var queryString = {}; 
        window.location.href.replace(
         new RegExp("([^?=&]+)(=([^&]*))?", "g"), 
         function($0, $1, $2, $3) { queryString[$1] = $3; } 
        ); 

     if (queryString[base.options.param]) { 

      var tab = $("a[href='#" + queryString[base.options.param] + "']"); 

         tab 
          .closest(".nav") 
          .find("a") 
          .removeClass("current") 
          .end() 
          .next(".list-wrap") 
          .find("ul") 
          .hide(); 
         tab.addClass("current"); 
         $("#" + queryString[base.options.param]).show(); 

       };    

    }; 
    base.init(); 
}; 

    $.organicTabs.defaultOptions = { 
     "speed": 300, 
     "param": "tab" 
    }; 

$.fn.organicTabs = function(options) { 
    return this.each(function() { 
     (new $.organicTabs(this, options)); 
    }); 
}; 

})(jQuery); 

Answer 2

如果您檢查您提供的第一個鏈接的源代碼，你將看到選項卡包含的鏈接是這樣的：

<a href="#featured" class="">Featured</a> 

這是一種網頁內的鏈接。您應該在頁面鏈接中使用＃。整個網址被替換的原因是因爲它將href解釋爲新的url。 ＃看當前頁面的內容。