Four Tab with different style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tab Pane Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- webfxlayout.js -->
<script type="text/javascript">
/* this is a dummy webfxlayout file to be used in download zip files */
/* Do includes */
if (window.pathToRoot == null)
pathToRoot = "./";
document.write('<link type="text/css" rel="stylesheet" href="local/webfxlayout.css">');
webfxMenuDefaultImagePath = pathToRoot + "images/";
/* end includes */
/* set up browser checks and add a simple emulation for IE4 */
// check browsers
var op = /opera 5|opera\/5/i.test(navigator.userAgent);
var ie = !op && /msie/i.test(navigator.userAgent); // preventing opera to be identified as ie
var mz = !op && /mozilla\/5/i.test(navigator.userAgent); // preventing opera to be identified as mz
if (ie && document.getElementById == null) { // ie4
document.getElementById = function(sId) {
return document.all[sId];
};
}
/* end browser checks */
webfxLayout = {
writeTitle : function (s, s2) {
document.write("<div id='webfx-title-background'></div>");
if (op) {
document.write("<h1 id='webfx-title' style='top:9px;'>" + s + "</h1>");
}
else {
document.write("<h1 id='webfx-title'>" + s + "</h1>");
}
if (s2 == null)
s2 = "WebFX - What you never thought possible!";
if (op) {
document.write("<span id='webfx-sub-title' style='top:46px;'>" + s2 + "</span>");
}
else {
document.write("<span id='webfx-sub-title'>" + s2 + "</span>");
}
},
writeMainTitle : function () {
this.writeTitle("WebFX", "What you never thought possible!");
},
writeTopMenuBar : function () {
document.write("<div id='webfx-menu-bar-1'></div>");
if (op) {
document.write("<style>.webfx-menu-bar a {padding-top:3px;}</style>");
document.write("<div id='webfx-menu-bar-2' style='height:2px;'></div>");
}
else
document.write("<div id='webfx-menu-bar-2'></div>");
document.write("<div id='webfx-menu-bar'>");// div is closed in writeBottomMenuBar
},
writeBottomMenuBar : function () {
document.write("</div>");
if (op)
document.write("<div id='webfx-menu-bar-3' style='height:0px;'></div>");
else
document.write("<div id='webfx-menu-bar-3'></div>");
document.write("<div id='webfx-menu-bar-4'></div>");
document.write("<div id='webfx-menu-bar-5'></div>");
},
writeMenu : function () {
this.writeTopMenuBar();
//document.write(webfxMenuBar);
document.write("<div class='webfx-menu-bar'><a href='http://webfx.eae.net'>WebFX Home</a></div>");
this.writeBottomMenuBar();
},
writeDesignedByEdger : function () {
if (ie && document.body.currentStyle.writingMode != null)
document.write("<div id='webfx-about'>Page designed and maintained by " +
"<a href='mailto:erik@eae.net'>Erik Arvidsson</a> & " +
"<a href='mailto:eae@eae.net'>Emil A Eklund</a>.</div>");
}
};
if (ie && window.attachEvent) {
window.attachEvent("onload", function () {
var scrollBorderColor = "rgb(120,172,255)";
var scrollFaceColor = "rgb(234,242,255)";
with (document.body.style) {
scrollbarDarkShadowColor = scrollBorderColor;
scrollbar3dLightColor = scrollBorderColor;
scrollbarArrowColor = "black";
scrollbarBaseColor = scrollFaceColor;
scrollbarFaceColor = scrollFaceColor;
scrollbarHighlightColor = scrollFaceColor;
scrollbarShadowColor = scrollFaceColor;
scrollbarTrackColor = "white";
}
});
}
/* we also need some dummy constructors */
webfxMenuBar = {
add : function () {}
};
function WebFXMenu() {
this.add = function () {};
}
function WebFXMenuItem() {}
function WebFXMenuSeparator() {}
function WebFXMenuButton() {}
</script>
<!-- this link element includes the css definitions that describes the tab pane -->
<!--
<link type="text/css" rel="stylesheet" href="tab.winclassic.css" />
-->
<!-- tab.css -->
<style id="luna-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 100%;
}
.dynamic-tab-pane-control .tab-row .tab {
font: Menu;
cursor: Default;
display: inline;
margin: 1px -1px 1px 2px;
float: left;
padding: 2px 5px 3px 5px;
background: ActiveBorder;
border: 0;/* 1px solid; */
border-color: ThreeDHighlight ThreeDDarkShadow
ThreeDDarkShadow ThreeDHighlight;
border-bottom: 0;
z-index: 1;
white-space: nowrap;
position: relative;
top: 0;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
background: ThreeDHighlight !important;
border: 1px solid ThreeDDarkShadow;
border-bottom: 0;
z-index: 3;
padding: 2px 6px 4px 6px;
margin: 1px -3px -3px 0px;
top: -2px;
}
.dynamic-tab-pane-control .tab-row .tab a {
font: Menu;
color: WindowText;
text-decoration: none;
cursor: default;
}
.dynamic-tab-pane-control .tab-row .tab.hover {
background: Highlight;
}
.dynamic-tab-pane-control .tab-page {
clear: both;
border: 1px solid ThreeDDarkShadow;
background: ThreeDHighlight;
z-index: 2;
position: relative;
top: -2px;
color: WindowText;
font: Message-Box;
padding: 10px;
height: 200px;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
}
</style>
<!-- tab.webfx.css -->
<style id="webfx-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
/*
bright: rgb(234,242,255);
normal: rgb(120,172,255);
dark: rgb(0,66,174);
*/
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 100%;
}
.dynamic-tab-pane-control .tab-row .tab {
font-family: Verdana, Helvetica, Arial;
font-size: 12px;
cursor: Default;
display: inline;
margin: 1px -5px 1px 5px;
float: left;
padding: 3px 6px 3px 6px;
background: rgb(234,242,255);
border: 1px solid;
border-color: rgb(120,172,255);
border-left: 0;
border-bottom: 0;
border-top: 0;
cursor: hand;
cursor: pointer;
z-index: 1;
position: relative;
top: 0;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
border: 1px solid rgb(120,172,255);
border-bottom: 0;
z-index: 3;
padding: 2px 6px 5px 6px;
margin: 1px -6px -2px 0px;
top: -2px;
background: white;
}
.dynamic-tab-pane-control .tab-row .tab a {
font-family: Verdana, Helvetica, Arial;
font-size: 13px;
color: rgb(0,66,174);
text-decoration: none;
cursor: hand;
cursor: pointer;
}
.dynamic-tab-pane-control .tab-row .hover a {
color: rgb(0,66,174);
}
.dynamic-tab-pane-control .tab-row .tab.selected a {
font-weight: bold;
}
.dynamic-tab-pane-control .tab-page {
clear: both;
border: 1px solid rgb(120,172,255);
background: White;
z-index: 2;
position: relative;
top: -2px;
color: Black;
font-family: Verdana, Helvetica, Arial;
font-size: 13px;
padding: 10px;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
background: rgb(234,242,255);
height: 1.85em;
width: 100%;
}
</style>
<!-- tab.winclassic.css -->
<style id="winclassic-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 100%;
}
.dynamic-tab-pane-control .tab-row .tab {
font: Menu;
cursor: Default;
display: inline;
margin: 1px -2px 1px 2px;
float: left;
padding: 2px 5px 3px 5px;
background: ThreeDFace;
border: 1px solid;
border-color: ThreeDHighlight ThreeDDarkShadow
ThreeDDarkShadow ThreeDHighlight;
border-bottom: 0;
z-index: 1;
position: relative;
top: 0;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
border-bottom: 0;
z-index: 3;
padding: 2px 6px 5px 7px;
margin: 1px -3px -2px 0px;
top: -2px;
}
.dynamic-tab-pane-control .tab-row .tab a {
font: Menu;
color: WindowText;
text-decoration: none;
cursor: default;
}
.dynamic-tab-pane-control .tab-row .hover a {
color: blue;
}
.dynamic-tab-pane-control .tab-page {
clear: both;
border: 1px solid;
border-color: ThreeDHighlight ThreeDDarkShadow
ThreeDDarkShadow ThreeDHighlight;
background: ThreeDFace;
z-index: 2;
position: relative;
top: -2px;
color: WindowText;
font: Message-Box;
padding: 10px;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
}
</style>
<!-- the id is not needed. It is used here to be able to change css file at runtime -->
<style type="text/css">
.dynamic-tab-pane-control .tab-page {
height: 200px;
}
.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
height: 100px;
}
html, body {
background: ThreeDFace;
}
form {
margin: 0;
padding: 0;
}
/* over ride styles from webfxlayout */
body {
margin: 10px;
width: auto;
height: auto;
}
.dynamic-tab-pane-control h2 {
text-align: center;
width: auto;
}
.dynamic-tab-pane-control h2 a {
display: inline;
width: auto;
}
.dynamic-tab-pane-control a:hover {
background: transparent;
}
</style>
<!-- tabpane.js -->
<script type="text/javascript">
/*----------------------------------------------------------------------------\
| Tab Pane 1.02 |
|-----------------------------------------------------------------------------|
| Created by Erik Arvidsson |
| (http://webfx.eae.net/contact.html#erik) |
| For WebFX (http://webfx.eae.net/) |
|-----------------------------------------------------------------------------|
| Copyright (c) 1998 - 2003 Erik Arvidsson |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including but not limited to the warranties of merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or copyright holders be liable for any claim, damages or other |
| liability, whether in an action of contract, tort or otherwise, arising |
| from, out of or in connection with the software or the use or other |
| dealings in the software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This software is available under the three different licenses mentioned |
| below. To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License http://webfx.eae.net/license.html |
| Permits anyone the right to use the software in a non-commercial context |
| free of charge. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license http://webfx.eae.net/commercial.html |
| Permits the license holder the right to use the software in a commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of implementations of the licensed software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper credits are given and the original and modified source |
| code are included. Requires that the final product, software derivate from |
| the original source or any software utilizing a GPL component, such as |
| this, is also licensed under the GPL license. |
|-----------------------------------------------------------------------------|
| 2002-01-?? | First working version |
| 2002-02-17 | Cleaned up for 1.0 public version |
| 2003-02-18 | Changed from javascript uri for anchors to return false |
| 2003-03-03 | Added dispose methods to release IE memory |
|-----------------------------------------------------------------------------|
| Dependencies: *.css a css file to define the layout |
|-----------------------------------------------------------------------------|
| Created 2002-01-?? | All changes are in the log above. | Updated 2003-03-03 |
\----------------------------------------------------------------------------*/
// This function is used to define if the browser supports the needed
// features
function hasSupport() {
if (typeof hasSupport.support != "undefined")
return hasSupport.support;
var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
hasSupport.support = ( typeof document.implementation != "undefined" &&
document.implementation.hasFeature( "html", "1.0" ) || ie55 )
// IE55 has a serious DOM1 bug... Patch it!
if ( ie55 ) {
document._getElementsByTagName = document.getElementsByTagName;
document.getElementsByTagName = function ( sTagName ) {
if ( sTagName == "*" )
return document.all;
else
return document._getElementsByTagName( sTagName );
};
}
return hasSupport.support;
}
///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab panes
//
// el : HTMLElement The html element used to represent the tab pane
// bUseCookie : Boolean Optional. Default is true. Used to determine whether to us
// persistance using cookies or not
//
function WebFXTabPane( el, bUseCookie ) {
if ( !hasSupport() || el == null ) return;
this.element = el;
this.element.tabPane = this;
this.pages = [];
this.selectedIndex = null;
this.useCookie = bUseCookie != null ? bUseCookie : true;
// add class name tag to class name
this.element.className = this.classNameTag + " " + this.element.className;
// add tab row
this.tabRow = document.createElement( "div" );
this.tabRow.className = "tab-row";
el.insertBefore( this.tabRow, el.firstChild );
var tabIndex = 0;
if ( this.useCookie ) {
tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
if ( isNaN( tabIndex ) )
tabIndex = 0;
}
this.selectedIndex = tabIndex;
// loop through child nodes and add them
var cs = el.childNodes;
var n;
for (var i = 0; i < cs.length; i++) {
if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
this.addTabPage( cs[i] );
}
}
}
WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";
WebFXTabPane.prototype.setSelectedIndex = function ( n ) {
if (this.selectedIndex != n) {
if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
this.pages[ this.selectedIndex ].hide();
this.selectedIndex = n;
this.pages[ this.selectedIndex ].show();
if ( this.useCookie )
WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n ); // session cookie
}
};
WebFXTabPane.prototype.getSelectedIndex = function () {
return this.selectedIndex;
};
WebFXTabPane.prototype.addTabPage = function ( oElement ) {
if ( !hasSupport() ) return;
if ( oElement.tabPage == this ) // already added
return oElement.tabPage;
var n = this.pages.length;
var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
tp.tabPane = this;
// move the tab out of the box
this.tabRow.appendChild( tp.tab );
if ( n == this.selectedIndex )
tp.show();
else
tp.hide();
return tp;
};
WebFXTabPane.prototype.dispose = function () {
this.element.tabPane = null;
this.element = null;
this.tabRow = null;
for (var i = 0; i < this.pages.length; i++) {
this.pages[i].dispose();
this.pages[i] = null;
}
this.pages = null;
};
// Cookie handling
WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
var expires = "";
if ( nDays ) {
var d = new Date();
d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
expires = "; expires=" + d.toGMTString();
}
document.cookie = sName + "=" + sValue + expires + "; path=/";
};
WebFXTabPane.getCookie = function (sName) {
var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
var res = re.exec( document.cookie );
return res != null ? res[3] : null;
};
WebFXTabPane.removeCookie = function ( name ) {
setCookie( name, "", -1 );
};
///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab pages. This one should not be used.
// Use WebFXTabPage.addTabPage instead
//
// el : HTMLElement The html element used to represent the tab pane
// tabPane : WebFXTabPane The parent tab pane
// nindex : Number The index of the page in the parent pane page array
//
function WebFXTabPage( el, tabPane, nIndex ) {
if ( !hasSupport() || el == null ) return;
this.element = el;
this.element.tabPage = this;
this.index = nIndex;
var cs = el.childNodes;
for (var i = 0; i < cs.length; i++) {
if (cs[i].nodeType == 1 && cs[i].className == "tab") {
this.tab = cs[i];
break;
}
}
// insert a tag around content to support keyboard navigation
var a = document.createElement( "A" );
this.aElement = a;
a.href = "#";
a.onclick = function () { return false; };
while ( this.tab.hasChildNodes() )
a.appendChild( this.tab.firstChild );
this.tab.appendChild( a );
// hook up events, using DOM0
var oThis = this;
this.tab.onclick = function () { oThis.select(); };
this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
}
WebFXTabPage.prototype.show = function () {
var el = this.tab;
var s = el.className + " selected";
s = s.replace(/ +/g, " ");
el.className = s;
this.element.style.display = "block";
};
WebFXTabPage.prototype.hide = function () {
var el = this.tab;
var s = el.className;
s = s.replace(/ selected/g, "");
el.className = s;
this.element.style.display = "none";
};
WebFXTabPage.prototype.select = function () {
this.tabPane.setSelectedIndex( this.index );
};
WebFXTabPage.prototype.dispose = function () {
this.aElement.onclick = null;
this.aElement = null;
this.element.tabPage = null;
this.tab.onclick = null;
this.tab.onmouseover = null;
this.tab.onmouseout = null;
this.tab = null;
this.tabPane = null;
this.element = null;
};
WebFXTabPage.tabOver = function ( tabpage ) {
var el = tabpage.tab;
var s = el.className + " hover";
s = s.replace(/ +/g, " ");
el.className = s;
};
WebFXTabPage.tabOut = function ( tabpage ) {
var el = tabpage.tab;
var s = el.className;
s = s.replace(/ hover/g, "");
el.className = s;
};
// This function initializes all uninitialized tab panes and tab pages
function setupAllTabs() {
if ( !hasSupport() ) return;
var all = document.getElementsByTagName( "*" );
var l = all.length;
var tabPaneRe = /tab\-pane/;
var tabPageRe = /tab\-page/;
var cn, el;
var parentTabPane;
for ( var i = 0; i < l; i++ ) {
el = all[i]
cn = el.className;
// no className
if ( cn == "" ) continue;
// uninitiated tab pane
if ( tabPaneRe.test( cn ) && !el.tabPane )
new WebFXTabPane( el );
// unitiated tab page wit a valid tab pane parent
else if ( tabPageRe.test( cn ) && !el.tabPage &&
tabPaneRe.test( el.parentNode.className ) ) {
el.parentNode.tabPane.addTabPage( el );
}
}
}
function disposeAllTabs() {
if ( !hasSupport() ) return;
var all = document.getElementsByTagName( "*" );
var l = all.length;
var tabPaneRe = /tab\-pane/;
var cn, el;
var tabPanes = [];
for ( var i = 0; i < l; i++ ) {
el = all[i]
cn = el.className;
// no className
if ( cn == "" ) continue;
// tab pane
if ( tabPaneRe.test( cn ) && el.tabPane )
tabPanes[tabPanes.length] = el.tabPane;
}
for (var i = tabPanes.length - 1; i >= 0; i--) {
tabPanes[i].dispose();
tabPanes[i] = null;
}
}
// initialization hook up
// DOM2
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", setupAllTabs, false );
// IE
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", setupAllTabs );
window.attachEvent( "onunload", disposeAllTabs );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
setupAllTabs();
};
}
else
window.onload = setupAllTabs;
}
</script>
</head>
<body>
<script type="text/javascript">
function setLinkSrc( sStyle ) {
document.getElementById( "luna-tab-style-sheet" ).disabled = sStyle != "luna";
document.getElementById( "webfx-tab-style-sheet" ).disabled = sStyle != "webfx"
document.getElementById( "winclassic-tab-style-sheet" ).disabled = sStyle != "winclassic"
document.documentElement.style.background =
document.body.style.background = sStyle == "webfx" ? "white" : "ThreeDFace";
}
setLinkSrc( "luna" );
</script>
<form action="#">
<fieldset>
<legend>Select Style Sheet</legend>
<input id="luna-radio" type="radio" name="tab-css-radio" checked="checked"
value="css/luna/tab.css" onclick="setLinkSrc('luna')"/>
<label for="luna-radio">luna/tab.css</label>
<br />
<input id="webfx-radio" type="radio" name="tab-css-radio" value="css/tab.webfx.css"
onclick="setLinkSrc('webfx')" />
<label for="webfx-radio">tab.webfx.css</label>
<br />
<input id="classic-radio" type="radio" name="tab-css-radio"
value="css/tab.winclassic.css" onclick="setLinkSrc('winclassic')"/>
<label for="classic-radio">tab.winclassic.css</label>
</fieldset>
</form>
<p> </p>
<div class="tab-pane" id="tabPane1">
<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
//tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
//alert( 0 )
</script>
<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page" id="tabPage2">
<h2 class="tab">Security</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
<br />
<br />
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
</div>
<div class="tab-page" id="tabPage3">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</script>
This is text of tab 3. This is text of tab 3. This is text of tab 3.
This is text of tab 3. This is text of tab 3. This is text of tab 3.
This is text of tab 3. This is text of tab 3. This is text of tab 3.
</div>
<div class="tab-page" id="tabPage4">
<h2 class="tab">Content</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage4" ) );</script>
<fieldset>
<legend>Content</legend>
This is text of tab 4. This is text of tab 4. This is text of tab 4.
This is text of tab 4. This is text of tab 4. This is text of tab 4.
This is text of tab 4. This is text of tab 4. This is text of tab 4.
</fieldset>
</div>
</div>
<p>Another tab below</p>
<!-- id is not necessary unless you want to support multiple tabs with persistence -->
<div class="tab-pane" id="tabPane2">
<div class="tab-page">
<h2 class="tab">General</h2>
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page">
<h2 class="tab">Security</h2>
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
<br />
<br />
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
</div>
<div class="tab-page">
<h2 class="tab">Nested</h2>
<!-- id is not necessary unless you want to support multiple tabs with persistence -->
<div class="tab-pane" id="tabPane3">
<div class="tab-page">
<h2 class="tab">General</h2>
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page">
<h2 class="tab">Privacy</h2>
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
</div>
</div>
</div>
</div>
<script type="text/javascript">
setupAllTabs();
</script>
</body>
</html>
Related examples in the same category
