使用直接 URL link 的页面上的目标选项卡会在选项卡单击时中断 URL

Question

我正在尝试在我的页面中创建一个选项卡式区域。这些选项卡在不离开页面的情况下导航隐藏区域。我还希望能够 link 到页面中的某个区域。它工作正常，除非您单击菜单并显示隐藏区域，它仅使用选项卡扩展名重写 URL，从而破坏 URL 的 link。所以有人试图分享 link 不知道格式..

我正在使用这段代码 https://css-tricks.com/examples/OrganicTabsReplaceState，我认为没有问题。

您可以在此处查看有关我的问题的现场演示：http://bit.ly/1IP1ST4

单击选项卡正在删除： /products/eurorack-modules/waveform-modifiers/reactive-shaper/

并将其替换为 ?tab=mytabname

应该是简单的添加吧。我正在努力弄清楚为什么..?

Answer 1

如果您检查您提供的第一个 link 的来源，您会看到选项卡包含 link，如下所示：

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

那是页内 link。您应该在页面 links 中使用 #。整个 url 被替换的原因是因为它将 href 解释为一个新的 url 去。 # 查看当前页面。

Answer 2

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

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

    // 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([=10=], , , ) { queryString[] = ; }
                    );

        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);

使用直接 URL link 的页面上的目标选项卡会在选项卡单击时中断 URL

Targeting tabs on page with direct URL link breaks URL on tab click

javascript

hash

jquery

tabs

url-rewriting