Simple JavaScript Tabs: Switch the content displayed for different tabs

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 66%Total: 175 All time: 297 This week: 2Up
Version License JavaScript version Categories
javascript-tabs 1GNU General Publi...1.0HTML
Description 

Author

Pravin Sonawane

This is a simple object that can switch the content displayed for different tabs.

It takes a a given HTML content and replaces in the tab content section.

The object can also change the CSS class of the currently selected tab when a new tab is selected.

Innovation Award
JavaScript Programming Innovation award winner
January 2016
Winner

Prize: One downloadable e-book of choice by O'Reilly		 Sometimes when you need to present a lot of content in a single page, you can divide it in multiple groups of related content and use tabs to display only one group at a time.

This object can switch the displayed content between different groups of content on a tab based HTML user interface.

Manuel Lemos
Picture of Pravin Sonawane
  Performance   Level  
Name: Pravin Sonawane <contact>
Classes: 3 packages by
Country: India India
Age: 44
All time rank: 918 in India India
Week rank: 6 Up1 in India India Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Example

<html>
<head>
<title>Simple JavaScript Tabs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="60%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="5%" align="center"></td>
        <td width="7%" align="center" data="1" name="tabs[]" onclick="javascript: myObject.seltab('Tab1 Content',1);" class="tab_sel">Tab1</td>
        <td width="1px"></td>
        <td width="7%" align="center" data="2" name="tabs[]" onclick="javascript: myObject.seltab('Tab2 Content',2);" class="tab">Tab2</td>
        <td width="1px"></td>
        <td width="7%" align="center" data="3" name="tabs[]" onclick="javascript: myObject.seltab('Tab3 Content',3);" class="tab">Tab3</td>
        <td width="1px"></td>
        <td width="7%" align="center" data="4" name="tabs[]" onclick="javascript: myObject.seltab('Tab4 Content',4);" class="tab">Tab4</td>
        <td align="left">&nbsp;</td>
    </tr>
    <tr>
        <td valign="top" align="left"  colspan="11">
            <div id="tabs_data" class="content_box"></div>
        </td>
    </tr>
</table>
<script language="javascript" src="mytabs.js"></script> 
<script language="javascript" type="text/javascript">
	myObject = new mytab();
	myObject.seltab('Tab1 Content',1); // default tab
</script>
</body>
</html>

  Files folder image Files (3)  
File Role Description
Accessible without login Plain text file index.html Example Index File
Plain text file mytabs.js Class JavaScript Class
Accessible without login Plain text file style.css Data Cascaded Stylesheet

Downloadjavascript-tabs-2016-01-22.zip 1KB
Downloadjavascript-tabs-2016-01-22.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:175
This week:0
All time:297
This week:2Up
User Ratings User Comments (1)
 All time
Utility:95%StarStarStarStarStar
Consistency:90%StarStarStarStarStar
Documentation:-
Examples:100%StarStarStarStarStarStar
Tests:-
Videos:-
Overall:66%StarStarStarStar
Rank:27
 
This is a very good and useful class ;-)
8 years ago (José Filipe Lopes Santos)		70%StarStarStarStar
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.