Semantic On-Page Tabs

JavaScriptSource Staff Oct 29, 2007

General

Create links to different topics on one page. Since all of the information is included on the same page, it will still be displayed if JavaScript is turned off. Easy to set-up.

Travel to London with Us
Itinerary
Prices

London is the capital city of England and the United Kingdom, a mix of history, architecture and culture has created an amazing and constantly evolving city.

Day One: Visit Westminster Abbey, the Royal Tombs, and Poets' Corner. Afterward, stroll around the Houses of Parliament. Later in the afternoon, explore Piccadilly Circus, the teeming epicenter of London's West End. Have dinner in Soho.
Day Two: Visit Green Park. Buckingham Palace and the changing of the Guard. Visit the Royal Mews, Trafalgar Square, the National Gallery. After dinner in the Covent Garden area or on the Thames, pick up your travel guide or ask a friendly-looking Londoner for a recommendation for a bar, pub, or club.
Day Three: Visit The Tower of London. Explore the precincts on your own, making certain you allot enough time to see the Crown Jewels. From the Tower, head over to nearby St. Paul's Cathedral.

$1,250 per person, including air and breakfast.

Notes

Created by: skatan
Web Site: http://snipplr.com/users/skatan/
Posted: October 29, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: semanticTabs.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: skatan | http://snipplr.com/users/skatan/ */
function setLink(i) {
		a[i].onclick = function () {
			 div[i].style.display = "block";
 			for(var j = 0; j < div.length; j++) {
  				if (i != j) {
 	  				div[j].style.display = "none";
  				}
  		} 
		return false;
		}
}
	
function initTabs() {
		var tabs = document.getElementById("tabbed_sub"); // put in id for tabbed list here
		var links = tabs.getElementsByTagName("a");
		div = [];
		a = [];
		
		//Initialize tabs
		for (var i = 0; i < links.length; i++) {
			 div[i] = document.getElementById(links[i].href.substr(links[i].href.indexOf("#") + 1));
			 if (i != 0) {
				  div[i].style.display="none";
 			} else { 
	  			div[i].style.display="block";
 			}
 			a[i] = links[i];
 			setLink(i)
		}
}
	
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  initTabs();
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="semanticTabs.js"></script>

Body

Paste this code into the BODY section of your HTML document


<ul id="tabbed_sub">
	<li><a href="#one">Travel to London with Us</a></li>
	<li><a href="#two">Itinerary</a></li>
	<li><a href="#three">Prices</a></li>
</ul>

<div id="one">London is the capital city of England and the United Kingdom, a mix of history, architecture and culture has created an amazing and constantly evolving city.</div>

<div id="two"><ul style="margin-top: 1pt">
  <li><strong>Day One:</strong> Visit Westminster Abbey, the Royal Tombs, and Poets' Corner. Afterward, stroll around the Houses of Parliament. Later in the afternoon, explore Piccadilly Circus, the teeming epicenter of London's West End. Have dinner in Soho.</li>
  <li><strong>Day Two:</strong> Visit Green Park. Buckingham Palace and the changing of the Guard. Visit the Royal Mews, Trafalgar Square, the National Gallery. After dinner in the Covent Garden area or on the Thames, pick up your travel guide or ask a friendly-looking Londoner for a recommendation for a bar, pub, or club.</li>
  <li><strong>Day Three:</strong> Visit The Tower of London. Explore the precincts on your own, making certain you allot enough time to see the Crown Jewels. From the Tower, head over to nearby St. Paul's Cathedral.</li>
</ul></div>

<div id="three">$1,250 per person, including air and breakfast.</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details