如何根据标签的名称在标签中创建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时，会看到url：www.example.com/example/a#/example/a

单击第二个选项卡DEF后，url如下所示：www.example.com/example/b#/example/b

我不喜欢网址的样子，我更喜欢标签历史记录是根据标签的名称(ABC和DEF)：www.example.com/example/a#ABC和www.example.com/example/b#DEF

我已经寻找了很长一段时间，但没有找到任何关于如何做到这一点的东西……

Answer 1

好了，现在我要回答我自己的问题，>_<

不，我没有在网上的某个地方找到答案，我自己解决的……

该解决方案适用于jquery-tools版本1.2.6稳定

在与历史工具相关的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");

还有一件更重要的事情，你需要将" 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”：我喜欢这样：

www.example.com/example/a#ABC

www.example.com/example/b#DEF

如果你不想要" name“属性而是id或class，那么把我把name放到id或class的位置改一下，但一定要把id或class也放在标签里……