Ajax Tabs: Link to a Specific Tab

[Jaxbulls]

1) Script Title: Ajax Tabs Content script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem: Does anyone know if it is possible to create a URL that would link directly to lets say the 2nd tab.
For example, I have two pages, index.htm and tabs.htm. In tabs.htm is where this script is obviously.
Can I be on index.htm and have a link that goes to tabs.htm and then opens the second tab instead of the first one?

[LifeIsBeta]

I need to do the exact same thing.

[jscheuer1]

Well, where you have this or something like it:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

The one with the class="selected" is the default tab for the page. This condition is evaluated (among other things) a little farther down the page here:

<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

We could evaluate something else and change this situation before we invoke startajaxtabs(). For instance, your link to the page could be:

<a href="tabs.htm?sel=1">Link Text</a>

This will pass the parameter sel=1 to the tabs.htm which we can retrieve like so:

<script type="text/javascript">
if(location.search!=''){
document.getElementById('maintab').getElementsByTagName('li')[0].className=''
document.getElementById('maintab').getElementsByTagName('li')[parseInt(unescape(location.search).replace(/\D/g, ''))].className="selected"
}
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

In the case of the example sel=1, this will select the second tab (things are usually numbered starting from 0 not from 1 in javascript).

This will only work if no other numbers are being passed in the query string, normally there isn't with regular pages. If you are using server side programming and/or forms with your pages, this may not be the case.

[Jaxbulls]

Thanks that worked great!
I think it should be considered to put this code along with the original post because it sure seems like it would be helpful to a lot of people.

[Wildfire563]

Can this work with the regular Tab Content script?

http://www.dynamicdrive.com/dynamici...tabcontent.htm

Thanks

Thomas

http://www.flyingscool.com/index3.htm See Downloads tab

[jscheuer1]

Can this work with the regular Tab Content script?

Looking at the code and markup for that script, it appears to be equivalent as far as the hooks I used for the AJAX version so, with the caveat I gave for that script:

This will only work if no other numbers are being passed in the query string, normally there isn't with regular pages. If you are using server side programming and/or forms with your pages, this may not be the case.

I see no reason why not.

[Wildfire563]

Hi John,
Thanks for replying.

I cut and pasted the code above in, but it didn't seem to work for me. But I can only assume I am missing something.

As you can probably see from several posts I have made today, I'm trying to do 3 things, and I am not sure they are possible:

1. Using method above, pass variable from another page into http://www.flyingscool.com/Downloads.htm and have it open a particular tab.

2. Open a particular tab from a link within the same page, IOW, from the links in the menubar above. One problem I might have is quotes, as the links in the menubar are from the AnyLink Vertical menu, which is in the header and is enclosed in quotes. I tried using one of the .onclick expandcontent suggestions in many permutations, and none of them worked.

3. Use persistence, but have the choice of tab from a link override persistence.

I assume 1 is possible given your discussion above. I assume 2 is also possible, I'm totally lost on the syntax, however. I've tried following a couple of suggestions from various replies around here, but they didn't work. And I'm kind of thinking that 3 won't work. I'm wondering if it might, however, if I copy the tabcontent.js file to another name?

Thanks again,

Thomas

[jscheuer1]

I had a look at your page and you would need to turn persistence off (the AJAX tabs version doesn't have that to begin with). Or, you could disable it only when this feature is being used:

<script type="text/javascript">
if(location.search!=''){
enabletabpersistence=0;
document.getElementById('downloadtab').getElementsByTagName('li')[0].className=''
document.getElementById('downloadtab').getElementsByTagName('li')[parseInt(unescape(location.search).replace(/\D/g, ''))].className="selected"
}
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("downloadtab")
</script>

This will switch off saving of tabs for that page visit. However, using the back button will retain the query string so, will load the tab indicated in the query string, if the page is navigated to without the query string and there is a previous cookie still saved, it will take over. But, I am not certain that the temporary switching off of enabletabpersistence might not erase any previous cookie.

[Wildfire563]

Thanks John, I got it working. Your addition turning off persistence in the function works great. It lets me leave persistence on for other pages that use the same script, but turn it off when I need this function. Thank you very much.

[LifeIsBeta]

I assume it's probably not possible to link to a specific anchor name in the html doc that you're targeting eh?