Hey. I’ve just recently updated our company’s tabbed page navigation from an older, dated version to a version that is a little easier to handle, especially for me since I’m a designer with only some coding knowledge.
I used the following system: Tabbed Navigation Using CSS
It worked great with a few hacks was able to make it work over several pages instead of just the one. The fact that it generates a URL with #Name_of_Tab instead of our previous ?tab_1 format will help with SEO too so that’s great.
The only problem is, I have in our main navigation, direct links to other tabbed pages with #Tab_Link_Name included. The problem is that instead of loading the the new page and going to that tab, when in a tabbed page, it tries to load the tab into that page (which doesn’t exist and spits a blank page).
To see an example of this problem go to: Short Run Pro
Once there, roll over the Resources and then pick one of the links under Helpful Information and Guides, Bracket Calculator, Metal and Material, Hole and Fastener Information
Once there you can click the tabs and you’ll see the URL adds the #whatever up at the top. However, if you go back to the resources link at the top and select another page in a different category with a #name link in it, the page will try to load within that tabbed set of pages, instead of loading its own.
Now I’ve found a fix for that, but sadly the fix kills the tabs as well. So I would think I could use the two click options and be able to do an if statement of some sort to get it rolling but like I said, I’m a designer with some coding knowledge. Any help would be appreciated. I’ll post the code below with an explanation where needed.
<ol id="toc">
<li><a href="#Metal_Types"><span>Metal Types</span></a></li>
<li><a href="#Metal_Coatings"><span>Metal Coatings</span></a></li>
<li><a href="#Metal_Finishing"><span>Metal Finishing</span></a></li>
<li><a href="#Speciality_Metals"><span>Speciality Metals</span></a></li>
</ol>
<!-- White Sheet for Design Bracket Help Start Here -->
<div class="tabpagecontent" id="Metal_Types">
<!-- First Tab Instance, change name to "# + same as id" -->
<div style="visibility: hidden;">
<!-- Create the Instance to Load the First Tab -->
<script type="text/javascript">
var first_tab = "#Metal_Types";
tabSetup();
</script>
</div>
That’s the code for the tabbed area in specific. The little java blurb there is only so it will know to load that tab by default when visiting that page without selecting a tab. It isn’t the issue. You can see where my tab links are though, and they are contained within a OL and LI tag…
function tabSetup()
{
document.write (first_tab);
// CSS helper functions
CSS = {
// Adds a class to an element.
AddClass: function (e, c) {
if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
e.className += (e.className ? " " : "") + c;
},
// Removes a class from an element.
RemoveClass: function (e, c) {
e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|\\b" + c + "\\b ?", "gi"), "");
}
};
// Functions for handling tabs.
Tabs = {
// Changes to the tab with the specified ID.
GoTo: function (contentId, skipReplace) {
// This variable will be true if a tab for the specified
// content ID was found.
var foundTab = false;
// Get the TOC element.
var toc = document.getElementById("toc");
if (toc) {
var lis = toc.getElementsByTagName("li");
for (var j = 0; j < lis.length; j++) {
var li = lis[j];
// Give the current tab link the class "current" and
// remove the class from any other TOC links.
var anchors = li.getElementsByTagName("a");
for (var k = 0; k < anchors.length; k++) {
if (anchors[k].hash == "#" + contentId) {
CSS.AddClass(li, "current");
foundTab = true;
break;
} else {
CSS.RemoveClass(li, "current");
}
}
}
}
// Show the content with the specified ID.
var divsToHide = [];
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs*;
if (div.className.match(/\btabpagecontent\b/i)) {
if (div.id == "_" + contentId)
div.style.display = "block";
else
divsToHide.push(div);
}
}
// Hide the other content boxes.
for (var i = 0; i < divsToHide.length; i++)
divsToHide*.style.display = "none";
// Change the address bar.
if (!skipReplace) window.location.replace("#" + contentId);
},
OnClickHandler: function (e) {
// Stop the event (to stop it from scrolling or
// making an entry in the history).
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
// Get the name of the anchor of the link that was clicked.
Tabs.GoTo(this.hash.substring(1));
},
Init: function () {
if (!document.getElementsByTagName) return;
** // Attach an onclick event to all the anchor links on the page.
var list = document.getElementsByTagName("li");
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var a = anchors*;
[COLOR=Red] if (a.hash) a.onclick = Tabs.OnClickHandler;
if (a.hash.match(/#(w.+)/)) a.onclick = Tabs.OnClickHandler;[/COLOR]
}
var contentId;
if (window.location.hash) contentId = window.location.hash.substring(1);
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs*;
if (div.className.match(/\btabpagecontent\b/i)) {
if (!contentId) contentId = div.id;
div.id = "_" + div.id;
}
}
if (contentId) Tabs.GoTo(contentId, true);
}
};**
// Hook up the OnLoad event to the tab initialization function.
window.onload = Tabs.Init;
// Hide the content while waiting for the onload event to trigger.
var contentId = window.location.hash || first_tab;
if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.tabpagecontent", "display: none;");
style.addRule("div" + contentId, "display: block;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.tabpagecontent { display: none; }"));
style.appendChild(document.createTextNode("div" + contentId + " { display: block; }"));
head.appendChild(style);
}
}
}
The above is the Javascript to make it work. The bolded area is the one that makes the clicks work while the two lines in red are the two lines that actually load the link. The first one, when by its self, allows for the tabs to work but when clicking the link from the resources menu as described earlier, tries to load it into the current page as another tab within that page.
The second line, if alone or last declared (as it is now), is the one that breaks the tabs but allows for the links above to be navigated to just fine.
Ideally I’d like to be able to use the first line when the item is located within the LI tag (as the only time It’ll be like that is when its a tab) and the second line to be used any other time.
I’ve tried calling the tags and by getElementsByTagName and then doing an if statement for having them both, but that obviously didn’t work.
So if someone knows how to do this, or knows a better way I’d greatly appreciate it.
