Question

I have the following tabs in 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>

And I have history turned on.

So when I press on the first tab ABC, I have the url:
http://www.example.com/example/a#/example/a

And once the second tab DEF is clicked the url looks like this:
http://www.example.com/example/b#/example/b

I don’t like how the url looks like and I would prefer if the tab history was according to the name of the tab (ABC and DEF): http://www.example.com/example/a#ABC and http://www.example.com/example/b#DEF

I have been looking for this for quite a while but couldn’t find anything about how this can be done…

Answer 1

Ok, so I’m going to answer my own question >_<

No I didn’t find the solution somewhere on the net, I solved it myself…

The solution is for jquery-tools version 1.2.6 stable

In jquery-tools code which concerns the history tool, you change it from this:

(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);

To this: (no need for the new lines, you can remove them and return it to one line)

(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)}
}
)

The changes are two simple changes:
This:

location.href="#"+d

was changed to this:

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

And this:

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

was changed to this:

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

Also one more important thing, you need to add the attribute “name” to your tabs and put the name you want to appear in the address after the # (in my case I want the same link/name of the tab to appear), like this:

<!-- 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>

And that’s it you, now have a working jquery-tools’ tabs with history working with “#name of the tab” and not the “#href link” 😀
Like these:

http://www.example.com/example/a#ABC

http://www.example.com/example/b#DEF

If you don’t want the “name” attribute but the id or class, then change where I put name to id or class, but make sure to put id or class in your tabs too…