How to make content tabs linkable and bookmarkable?

Question

I'm needing to add content tabs to pages that are currently over long. This is as far as I've got: http://jsbin.com/olacod/1/edit

I've been attempting to make the tabs linkable (i.e. from other pages) and bookmarkable (from within a content tab or elsewhere on the same page) and realize I need some help. Many thanks in advance!

I've updated the [jsbin](http://jsbin.com/olacod/3/edit) to include one method I've tried using id 'linktotab' on the link which I need to activate the Tab2 li, for example. Hope it's clearer now. — Craig, Mar 23 '13 at 23:56
Happy to report that I've found a solution using click(). See updated [jsbin here](http://jsbin.com/olacod/4/edit). Love to know if you have a more efficient way of achieving this. Thanks! — Craig, Mar 25 '13 at 00:03
Glad to see you've solved your own problem! You should post your findings as an answer to this question and accept it. — Asad Saeeduddin, Mar 25 '13 at 00:38

score 0 · Answer 1 · answered Mar 22 '13 at 21:57

0

You can get separate links of each tab

http://jsbin.com/olacod/1/edit#tab1
http://jsbin.com/olacod/1/edit#tab2
http://jsbin.com/olacod/1/edit#tab3
http://jsbin.com/olacod/1/edit#tab4
http://jsbin.com/olacod/1/edit#tab5

it may not work in jsbin.. because jsbin re-initializes every url to base string.. in a custom page created by you on your website, you'll have to link you tabs in the above manner..

answered Mar 22 '13 at 21:57

writeToBhuwan

3,233
11
39
67

Thanks for a quick reply. I thought it would be as simple as that too, but it doesn't work (tried on the website). Any ideas? – Craig Mar 22 '13 at 22:15

score 0 · Answer 2 · answered Mar 22 '13 at 22:09

you want Back Button & Query, there is a plugin for this that can be found at: http://benalman.com/projects/jquery-bbq-plugin/

even comes with a large set of examples.

the problem with this though (no matter what the implementation) is that if you now look through a few tabs, and want to actually go back to the previous page, you now have to go back through the entire tab history and THEN you go back a page.

score 0 · Accepted Answer · answered Mar 25 '13 at 21:24

0

A solution is using click(). See updated jsbin here.

Perhaps you know of a more efficient way of achieving this?

answered Mar 25 '13 at 21:24

Craig

49
1
9

How to make content tabs linkable and bookmarkable?

3 Answers3