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后，网址如下所示： www.example.com/example/b#/example/b

我不喜欢网址的样子，如果标签历史记录符合标签的名称（ABC和DEF），我更喜欢这样：www.example.com/example/a#ABC和www.example.com/example/b#DEF

我一直在寻找这个问题但是却找不到任何关于如何做到的事情......

Answer 1

好的，所以我要回答我自己的问题＆gt; _＆lt;

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

解决方案适用于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链接”：D 像这样：

www.example.com/example/a#ABC

www.example.com/example/b#DEF

如果您不想使用“name”属性，但需要id或class，那么请更改我将名称添加到id或class的位置，但请务必将id或class放在标签中...

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

1 个答案: