0

I've got a set of jQuery UI tabs link so:

    <div id="tabs">
        <ul>
            <li><a href="#some_div">Overview</a></li>
            <li><a href="/somelink.html">Some Link</a></li>
            <li><a href="/anotherlink.html">Another Link</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>

What I'm trying to achieve is a direct link to a specific tab. So for instance if the tabs were in /tabs.html I'd want to be able to access the anotherlink.html directly but through tabs.html (essentially a link that will open tabs.html but with the anotherlink tab selected). I could obviously create the functionality by doing tabs.html#anotherlink and then checking the url and selecting the correct tab. I just wanted to make sure there was no obvious built in way to do this in jQuery UI.

I couldn't find anything in the documentation so any help would be appreciated!

Dormouse
  • 5,130
  • 1
  • 26
  • 42

1 Answers1

1

You can you use the .load() function if there is a link clicked.
And you can also fetch the value of href and don't forget preventdefault() so the links don't work as normal links.

Save the href value of the clicked link in the tab's div and then do something like .load('...html/#variable')

The accepted solution (mentioned in a comment below) is here.

  • jQuery UI does all that. What I'm looking for is being able to link directly to a specific tab. Thanks anyway though. – Dormouse May 15 '11 at 11:36
  • then fetch the hash from the url and depending the hash simulate a click on the coresponding tab, thta would be what i would do –  May 15 '11 at 11:40
  • Which is what I've said I plan on doing but I was just checking that jQuery UI didn't already have it built in since it seems like something fairly common – Dormouse May 15 '11 at 11:45
  • well think there is no better workaround so you have to create a function for this, maybe this could help: http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html http://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs –  May 15 '11 at 11:51