1

I'm using the most recent JQuery UI Tabs (1.10.2). http://jqueryui.com/tabs/

I need to be able to link to individual tabs from external pages. Maybe the more correct way to say it would be to say that I need to be able to change the initially active tab via a bookmarble link.

I know how to set the active index so that #tabs-3 is the active tab

$( "#tabs" ).tabs({ active: 5 });

But I need to know how to change the value for .tabs({ active }) with the url hash so that a link of "tabs-page.html#tabs-3" will load the third tab of "tabs-page.html" by changing .tabs({ active }) to "2" (since it is a zero-based integer).

I'm really more of an html/css designer and a novice to JQuery/JQuery UI, please and thank you for your help. I've searched and found fixes for earlier versions and alternate libraries like JQuery Tools, but nothing for JQuery 1.10.2. I've found ways to link to the section and then reset the window location, but that results in a lot of "jumpiness" as the browser switches between window locations. If there is another page with this fix please link in the comments. THANKS SO MUCH!!!

crash28
  • 51
  • 3

1 Answers1

2

You will need to read the value of the hash within your jQuery. Some good information can be found here Getting URL hash location, and using it in jQuery

var url = "http://site.com/file.htm#3";
var hashValue = url.substring(url.indexOf('#')).replace('#',''); // '3'

Once you have this, you will be able to set the active tab on the jqueryUI Tabs

$('#tabs').tabs( "option", "active", hashValue );

You would need to do all of this when the page initially loads, so within a $(function(){ ... });

Update

Here is the full code;

<script>

    $(function () {

        // run the jquery ui plugin
        $('#tabs').tabs();

        // grab the url
        var url = document.URL;
        // grab the value of the hash
        var hashValue = url.substring(url.indexOf('#')).replace('#', '');

        // check to make sure it is a number
        if (!isNaN(hashValue)) {
            // set the active tab
            $('#tabs').tabs("option", "active", hashValue);
        }            

    });

</script>
Community
  • 1
  • 1
Tim B James
  • 20,084
  • 4
  • 73
  • 103
  • 1
    I should specify that I need for any of the tab-links to work not just tabs-3. Also, the naming convention is the default (div id=tabs-1, div id=tabs-2, etc) – crash28 Apr 16 '13 at 15:52
  • 1
    Yeah, this is just an example. You would replace the url string with `document.url` which would then have what ever # value you have in it.Then adjust your code accordingly to what ever # value you are using. – Tim B James Apr 16 '13 at 15:54
  • also, @timbjames I'm still not fully sure how to implement this, can you give me a bit more context? sorry, I am a true javascript/JQuery n00b. I know how to implement JQuery library widgets and edit them but I really don't know how to put coe tofether on my own – crash28 Apr 16 '13 at 15:55
  • 1
    that still isn't quite doing what I need it to... I think I need the variable hashValue to be equal to the tab number extracted from the hash url minus 1 so that active equals a number between 0-6 since there are 7 tabs. As it is, it still tries to "jump" to the part of the page where
    is for example and I need the window to load at the top of the page. If I can set the hashValue to the extracted tab number (subtracted by 1) then I should be able to use a different naming convention for the tabs to prevent the hash from making the browser "jump" to the tab location.
     – crash28 Apr 16 '13 at 17:47
  • actually I may have been too rigid in my thinking that I still had to set the links to be the tab name instead of setting them to pure numbers like link to tab 1link to tab 2 etc. THANKS SO MUCH FOR YOUR HELP, PATIENCE, AND QUICK RESPONSE! – crash28 Apr 16 '13 at 17:57