Question

我试图在我的页面中创建一个标签区域。选项卡导航隐藏区域而不离开页面。我还希望能够链接到页面中的某个区域。除非您单击菜单以及显示隐藏区域，否则它仅使用制表符扩展名来重写URL，从而打破URL的链接。所以试图分享链接的人不会知道格式..

我使用此代码https://css-tricks.com/examples/OrganicTabsReplaceState，我认为没问题。

您可以在此处查看我的问题的实时演示：http://bit.ly/1IP1ST4

点击标签即可删除： /产品/ EURORACK模块/波形改性剂/无功整形器/

将其替换为？tab = mytabname

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

Answer 1

如果您检查所提供的第一个链接的来源，您会看到这些标签包含如下链接：

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

这是一个页内链接。您应该在页面链接中使用＃＆＃39; s。整个网址被替换的原因是因为它将href解释为一个新的网址。＃查看当前页面。

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

使用直接URL链接在页面上定位标签会在标签点击上中断URL

2 个答案: