Tab Content Script with Anchors! ;)

[Arci]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: Enabling Achors support for Tab Content Script


This post is rather an improvement than a help request... ;)

I've modified the JS in order to support anchors (link from a site to a specific tab). Only little modifications in the initializetabcontent() function needed.



function initializetabcontent(){
// fetch the anchor
var anchor = window.location.hash

for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
setCookie(arguments[i], "")
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
// if an anchor found, expand corresponding tab and content
if(anchor != "") {
var cmp = "#" + ulistlink.getAttribute("rel");
if(anchor == cmp){
expandcontent(ulistlink);
}
} else {
if (ulist[x].className=="selected" && clickedontab=="") { //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
}
}
} //end inner for loop
if (anchor == "" && clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined"){ //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
} else { //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
}
} //end outer for loop
}


Modifications are highlited in the code box above.

The anchors have to be the same as the rel attribute value of the <a> tag within your list. E.g. if your link looks sth. like <a href="#" rel="tab3">Tab Three</a> then you can link direktly to Tab three by http://www.yourdomain.com/yourfile.html#tab3

Perhaps the modification could make its way to the official Tab Content script ;)

[webtrade]

I've tried implementing the code but the content won't open after landing on a page from a clicked link on another page. Content only opens after a tab is clicked on.

[webtrade]

Never mind, I found an easier solution. I got the script to always open the first tab when landing on a page by deleting these three lines at the bottom:

if (typeof culistlink!="undefined"){ //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
} else { //else if no match found between tabcontent id and rel attribute value (cookie mis-association)

Thanks