1

我正在使用 jquery ui 选项卡在http://www.code7dev4.co.uk/data页面上的选项卡之间切换

相关的jquery代码是：

jQuery(document).ready(function ($) {
    function activateTab($tab) {
        var $activeTab = $tab.closest('dl').find('a.active'),
            contentLocation = $tab.attr("href") + 'Tab';

        // Strip off the current url that IE adds
        contentLocation = contentLocation.replace(/^.+#/, '#');

        //Make Tab Active
        $activeTab.removeClass('active');
        $tab.addClass('active');

        //Show Tab Content
        $(contentLocation).closest('.tabs-content').children('li').hide();
        $(contentLocation).css('display', 'block');
    }

    $('dl.tabs dd a').live('click', function (event) {
        activateTab($(this));
    });

    if (window.location.hash) {
        activateTab($('a[href="' + window.location.hash + '"]'));
        $.foundation.customForms.appendCustomMarkup();
    }
});

现在，客户端需要右侧的表单为每个数据搜索创建唯一的 url，这些在 url 中作为参数（例如http://www.code7dev4.co.uk/data?form_send=send&country=Uganda§or=健康&strail=plac&units=DollarConstant&year=2009 )。

切换标签会丢失 url 变量，我只剩下/data#table.

如何更改代码以便维护这些 url 参数？

4

1 回答 1

0

您正在使用以下内容设置基本 URL：

<base href="http://www.code7dev4.co.uk/data">

这会在加载http://www.code7dev4.co.uk/data#id而不是仅附加到当前 URL（包括查询字符串）时丢弃片段标识符。这意味着查询字符串被删除，更重要的是重新加载页面（这违背了非重新加载选项卡切换的全部目的）。

删除基本标签可以解决这个问题，但我不确定这会对其他地方产生什么影响。

更新

所以下面是我能找到的唯一解决方案来“解决”你正在处理的问题。它在这里非常适合作为练习，因为我建议不要使用这种技术 - 它不优雅，并且没有在 Chrome v23 以外的任何东西上进行过测试。实际上，我们通过在锚点上的事件期间base重写href属性来停用元素click（这将对应于页面上的选项卡）。然后我们在事件发生后重置原始的href20 毫秒mouseup。我们必须建立延迟，因为mouseup事件在点击事件之前触发。

var anchor = document.querySelector("a"),
    baseElement = document.querySelector("base"),
    baseHref = baseElement.getAttribute("href");

    anchor.addEventListener("click", function (event) {
        baseElement.setAttribute("href", "");
    }, true);

    anchor.addEventListener("mouseup", function (event) {
        setTimeout(function () {
            document.querySelector("base").setAttribute("href", baseHref);
        }, 20);
    }, true);

最好的解决方案就是不使用basetag，但如果您无法控制 HTML 输出，这可能会在紧要关头节省一天的时间。我真的很想看看是否有人提出了更好（即更优雅）的解决方案。

于 2012-09-30T09:24:47.340 回答