Javascript 在带有直接URL链接的页面上定位选项卡会在单击选项卡时中断URL

我正在尝试在我的页面中创建一个选项卡式区域。选项卡在不离开页面的情况下导航隐藏区域。我还希望能够链接到页面中的区域。它的工作，除了当你点击菜单，以及显示隐藏的区域，它重写的URL只有标签扩展名，因此打破了链接的URL。因此，试图共享链接的人不知道链接的格式

我正在使用这个代码，我认为它没有问题

您可以在此处看到我的问题的现场演示：

单击该选项卡将删除： /产品/eurorack模块/波形修改器/反应整形器/

并将其替换为？tab=mytabname

---

它应该只是简单地添加它。我正在努力找出原因。

如果您检查您提供的第一个链接的来源，您将看到选项卡包含如下链接：

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

---

这是一个页面内链接。对于页内链接，应使用。整个url被替换的原因是它将href解释为一个新的url让我们看看当前页面。

这个版本的organitabs.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);

我的代码使用：所以我相信我已经为页面内链接正确设置了它。我在我的config.yml中重写了\u hash\u links:false，这可能会影响它，但更改这意味着该链接将变为mydomain.com/page/link，这将无法与选项卡替换代码一起工作。也许我需要在js中添加代码来保留URL？