DHTML Tabs

Tab Navigation

Navigating Directly to a Tab

Use the window.location.hash String

Using a location hash allows you to activate a tab from another document.

To bring user focus to an element within any tab, use a hash in the location, just like you normally would. (doesn't work in Opera 7)

		
<a href="http://DHTMLkitchen.com/scripts/tabs/Tabs/demo/dual.html#content4"
  >link to content div #4</a>
		

Try It

link to content div #4

link to content div #3

The hash value can be a content div's id or the id of an element within any content.The script will figure out where the element is and switch to the correct tab.

The hash feature is part of HTML 2.0, so it degrades to non-supporting browsers well.

---

Function switchTabs

Function switchTabs() allows you to activate a tab from within the same document.

 	
switchTabs(sTabId, event, bReturn)

Parameters: 
   sTabId  ::   String  -an id of a tab REQUIRED
   event   ::   Object  -event (the word event represents this object) [OPTIONAL]
   bReturn ::   boolean -the return value (true | false)  [OPTIONAL]

 	

<!-- focus to content2 for browsers that don't support tab system -->
<a 
  href="#content2" 
  onclick="return switchTabs('tab2',event,false)">see Tab 2</a>

  	

If switchTabs is called with a tab id that does not exist in the document (e.g. switchTabs("tab9");), an error is produced but it is caught in a catch block. The tab will not switch.

To cancel the href action, call return switchTabs('tab2, event, false); .

To switch to a tab and not cancel the a tag's href, switchTabs('tab2, event, true); (omitted return statement optional).

To switch to a tab and scroll the window to 0,0, switchTabs('tab2, event); .

Next in this tutorial: TabSystem API Reference