如何根据选项卡的名称在ajaxed选项卡中制作jquery-tools的历史记录？

Question

我在 jquery-tools 中有以下标签：

<!-- tabs -->
<ul class="css-tabs">
    <li><a href="/example/a">ABC</a></li>
    <li><a href="/example/b">DEF</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
    <div style="display:block"></div>
</div>

我开启了历史记录。

因此，当我按下第一个标签 ABC 时，我有以下网址： www.example.com/example/a#/example/a

一旦点击第二个标签DEF，url 看起来像这样： www.example.com/example/b#/example/b

我不喜欢 URL 的样子，如果选项卡历史记录是根据选项卡的名称（ABC 和 DEF）：www.example.com/example/a#ABC 和 www.example.com/example/b#DEF

我一直在寻找这个，但找不到任何关于如何做到这一点的信息......

Answer 1

好的，那我来回答我自己的问题>_

不，我没有在网上某处找到解决方案，我自己解决了...

解决办法是jquery-tools版本1.2.6 stable

在涉及历史工具的 jquery-tools 代码中，您可以从这里更改它：

(function(a){var b,c,d,e;a.tools=a.tools||{version:"v1.2.6"},a.tools.history={init:function(g){e||(a.browser.msie&&a.browser.version<"8"?c||(c=a("<iframe/>").attr("src","javascript:false;").hide().get(0),a("body").prepend(c),setInterval(function(){var d=c.contentWindow.document,e=d.location.hash;b!==e&&a(window).trigger("hash",e)},100),f(location.hash||"#")):setInterval(function(){var c=location.hash;c!==b&&a(window).trigger("hash",c)},100),d=d?d.add(g):g,g.click(function(b){var d=a(this).attr("href");c&&f(d);if(d.slice(0,1)!="#"){location.href="#"+d;return b.preventDefault()}}),e=!0)}};function f(a){if(a){var b=c.contentWindow.document;b.open().close(),b.location.hash=a}}a(window).bind("hash",function(c,e){e?d.filter(function(){var b=a(this).attr("href");return b==e||b==e.replace("#","")}).trigger("history",[e]):d.eq(0).trigger("history",[e]),b=e}),a.fn.history=function(b){a.tools.history.init(this);return this.bind("history",b)}})(jQuery);

对此：（不需要新行，您可以将它们删除并返回到一行）

(function(a)
{
    var b,c,d,e;a.tools=a.tools||{version:"v1.2.6"},a.tools.history={init:function(g){e||(a.browser.msie&&a.browser.version<"8"?c||(c=a("<iframe/>").attr("src","javascript:false;").hide().get(0),
    a("body").prepend(c),setInterval(function(){var d=c.contentWindow.document,e=d.location.hash;b!==e&&a(window).trigger("hash",e)},100),
    f(location.hash||"#")):setInterval(function(){var c=location.hash;c!==b&&a(window).trigger("hash",c)},100),d=d?d.add(g):g,
    g.click(function(b){var d=a(this).attr("href");
    c&&f(d);if(d.slice(0,1)!="#"){location.href="#"+a(this).attr("name");return b.preventDefault()}}),e=!0)}};

    function f(a)
    {
    if(a)
    {
        var b=c.contentWindow.document;
        b.open().close(),
        b.location.hash=a
    }
    }a(window).bind("hash",function(c,e){e?d.filter(function(){var b=a(this).attr("name");return b==e||b==e.replace("#","")}).trigger("history",[e]):d.eq(0).trigger("history",[e]),b=e}),
    a.fn.history=function(b){a.tools.history.init(this);return this.bind("history",b)}
}
)

这些变化是两个简单的变化： 这个：

location.href="#"+d

改成这样了：

location.href="#"+a(this).attr("name")

还有这个：

var b=a(this).attr("href");

改成这样了：

var b=a(this).attr("name");

还有一件更重要的事情，您需要将“名称”属性添加到您的选项卡中，并将您希望出现在地址中的名称放在 # 之后（在我的情况下，我希望选项卡的相同链接/名称出现），像这样：

<!-- tabs -->
<ul class="css-tabs">
    <li><a href="/example/a" name="ABC">ABC</a></li>
    <li><a href="/example/b" name="DEF">DEF</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
    <div style="display:block"></div>
</div>

就是你，现在有一个工作 jquery-tools 的选项卡，其历史使用“#name of the tab”而不是“#href link”：D 像这些：

www.example.com/example/a#ABC

www.example.com/example/b#DEF

如果您不想要“名称”属性而是 id 或类，那么更改我将名称放入 id 或类的位置，但请确保将 id 或类也放入您的选项卡中...