Links within same-page tab subsections

[jaidanwolf]

Hi guys, I am using a script from Dynamic Drive for same-page tabs like so: Ajax Tabs (the code I am using is based on Demo #3 near the bottom).Everything is working wonderfully except for one little quirk. When a link is clicked within a particular tab section, if the page being linked to also has this tab script, it will land on the same tab. So for example, if I am on page1.html, Tab #3, I click a link to page 2.html, it takes me to page 2.html, Tab #3 instead of the first (and most important) tab. But I stress, this ONLY happens when linking between pages that are both using the tab script. Linking from any other page, there is no problem; the first tab is the one that automatically shows.The tab CSS code is as follows:

.shadetabs{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 12px Verdana;list-style-type: none;text-align: left;}.shadetabs li{display: inline;margin: 0;}.shadetabs li a{text-decoration: none;position: relative;z-index: 1;padding: 3px 7px;margin-right: 3px;border: 1px solid #778;color: #000000;background: #ffffff url(images/shade.gif) top left repeat-x;}.shadetabs li a:hover{text-decoration: underline;color: #2d2b2b;}.shadetabs li a.selected{position: relative;top: 1px;color: #F87431;}.shadetabs li a.selected{background-image: url(images/shadeactive.gif);border-bottom-color: #ffffff;}.shadetabs li a.selected:hover{text-decoration: none;}

Can anyone tell me if I am doing something wrong, or if there is a solution to this? Thanks so much!

[trevelluk]

I doubt that this is a CSS problem. Can you show us the source for the content containing one of the problem links?

[jaidanwolf]

Hi travelluk. This goes in the head of the page:

<ul id="countrytabs" class="shadetabs"><li><a href="#" rel="details" class="selected">Details</a></li><li><a href="#" rel="transport">Trans</a></li><li><a href="#" rel="apts">Apts</a></li></ul><div id="apttabs"><div id="details" class="tabcontent"><h2 class="tabtitle">Details</h2><p class="description">Description</p></div><div id="transport" class="tabcontent"><h2 class="tab">Trans</h2><p class="list">List of options.</p></div><div id="apts" class="tabcontent"><h2 class="tab">Apts</h2><p class="list"><a href="../ap/600/2/index.html">Name</a></p></div></div><script type="text/javascript">var countries=new ddtabcontent("countrytabs")countries.setpersist(true)countries.setselectedClassTarget("link") //"link" or "linkparent"countries.init()</script>

[trevelluk]

I suspect that the call to countries.setpersist(true) is the problem here (although I can't say this for certain).What I suspect is that this will cause a cookie to be set containing details of which tab is active, so that if the user reloads the page, the same tab as they were previously viewing will be selected again.Because of this, then when you go to a different page with tabs on, then this cookie will be used again and will incorrectly select a later tab, because as far as the tab script is concerned, that was the tab the user was previously viewing.If you don't care about the selected tab being retained on page refresh, then removing the call to countries.setpersist(true) should, I'd imagine, fix things (failing that, try changing true to false).If you do need it to be retained, then you'll need to find some way of identifying the tabs differently on different pages. I suspect its the "rel" attribute on the a tags that is being used to identify the tabs, so you'd need to find some way of making this different on different pages (I should just point out that this is partially speculation based on how other tab libraries I've used work, so it might be worth putting a quick test together to make sure this will help before you spend ages working out how to do this).

[jaidanwolf]

Thanks so much! Changing the setpersist to false worked perfectly. I appreciate the help!