PHP Code:
<!--//--><![CDATA[//><!--
/*
**
** @file: show-hide.js
** @author: Mike Foster via Sitepoint
** @url1: http://www.sitepoint.com/forums/showthread.php?t=464410
** @url2: http://cross-browser.com/
** @version: 1.0.1
** @created: 03/08/07
** @modified: 03/18/07
**
** @about: Show/hide divs using definition list navigation.
** @notes:
** On window load, iterate through tabbed navigation and assign function navOnClick to 'a' tags.
** When tab link clicked, show related content div, hide others, remove/add "current" class.
** Written by Mike Foster via Sitepoint (http://www.sitepoint.com/forums/member.php?u=24565)
** <u>Slightly</u> modified by Micky Hulse (pointers/inspiration via Mike) to work with multiple ID's.
** BIG PROPS to Mike for the guidance and the script! He is most definitely a JS guru! Check-out his site: http://cross-browser.com/
**
** @to-do:
** [1] Test for browser/platform (in)compatibilities
** [2] Bugs?
** [3] Change tabs based on time.
** [4] Better comments/descriptions in/for code?
** [5] Overall code optimization?
** [6] Make more generic? Currently works well with definition list.
** [7] Animated transitions?
** [8] Set session/cookie for selected tab.
** [9] Use absolute positioning to show/hide content: better SEO?
**
** @example: http://www.ambiguism.com/sandbox/scripts/tabs-show-hide/tabs.php
** @comments: micky@ambiguism.com
**
** Don't forget to visit http://cross-browser.com/
** Thanks Mike!
**
*/
// ids array:
var ids = new Array('navList01', 'navList02'); // Add more here.
// Load the script:
if(document.getElementById || document.all) {
xAddEventListener(window, 'load', startShowHide, false); // Start script on window load.
}
// startShowHide()
// Formerly window.onload
// Updated to use xAddEventListener
// http://www.sitepoint.com/forums/showpost.php?p=3324072&postcount=13
function startShowHide() {
for(var x=0; x<ids.length; x++) {
iterateNavList(ids[x], 'a', function(a) { a.onclick = navOnClick; });
}
}
// iterateNavList()
function iterateNavList(sContainerId, sTagName, fnCallback) {
var e = document.getElementById(sContainerId);
if(e) {
var i, a = e.getElementsByTagName(sTagName);
for (i = 0; i < a.length; ++i) {
fnCallback(a[i]);
}
}
}
// navOnClick()
function navOnClick() {
var pid = this.parentNode.parentNode.id; // Pointing to parent DL with an ID (<dl id="targID">...</dl>) specified in ids[] array above.
// Call iterateNavList, pass parent container, tag, and callback function:
iterateNavList(pid, 'a',
function(a) {
var id = a.href.substr(a.href.indexOf('#') + 1);
var e = document.getElementById(id);
if(e) {
e.style.display = 'none'; // Hide.
xRemoveClass(a.parentNode, 'currentItem');
}
}
);
var id = this.href.substr(this.href.indexOf('#') + 1);
var e = document.getElementById(id);
if(e) {
e.style.display = 'block'; // Show.
xAddClass(this.parentNode, 'currentItem');
}
return false;
}
// xAddClass, Copyright 2005-2007 Daniel Frechette - modified by Mike Foster
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
// mf: Modified for this script so they are no longer 'generic'.
function xAddClass(e, c) {
var s = '';
if(e.className.length && e.className.charAt(e.className.length - 1) != ' ') { s = ' '; }
e.className += s + c;
}
// xRemoveClass, Copyright 2005-2007 Daniel Frechette - modified by Mike Foster
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
// mf: Modified for this script so they are no longer 'generic'.
function xRemoveClass(e, c) {
e.className = e.className.replace(new RegExp("(^|\\s)"+c+"(\\s|$)",'g'), function(str, p1, p2) { return (p1 == ' ' && p2 == ' ') ? ' ' : ''; });
return true;
}
// xAddEventListener, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
// Dependencies: xGetElementById
function xAddEventListener(e, eT, eL, cap) {
if(!(e = xGetElementById(e))) return;
eT = eT.toLowerCase();
if(e.addEventListener) e.addEventListener(eT, eL, cap || false);
else if(e.attachEvent) e.attachEvent('on' + eT, eL);
else {
var o = e['on' + eT];
e['on' + eT] = typeof o == 'function' ? function(v) { o(v); eL(v); } : eL;
}
}
// xGetElementById, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementById(e) {
if(typeof(e) == 'string') {
if(document.getElementById) e = document.getElementById(e);
else if(document.all) e = document.all[e];
else e = null;
}
return e;
}
//--><!]]>
Script help: remove/add link class when clicked?
. It is effectively the same as doing this:
Bookmarks