我这个不知道什么时候从国外网站上淘过来的，很好用，支持W3C，可以用div+css来实现的东东。
他的JS如下：
程序代码： | [ 复制代码到剪贴板 ] |
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;
}
他的CSS书写好像不是很符合规则，我这里贴一个出来
程序代码： | [ 复制代码到剪贴板 ] |
.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;
}
最后是一个demo.html
程序代码： | [ 复制代码到剪贴板 ] |
<!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" />
<script type="text/javascript" src="local/webfxlayout.js"></script>
<!-- this link element includes the css definitions that describes the tab pane -->
<!--
<link type="text/css" rel="stylesheet" href="tab.winclassic.css" />
-->
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="css/luna/tab.css" disabled="disabled" />
<link id="webfx-tab-style-sheet" type="text/css" rel="stylesheet" href="css/tab.webfx.css" disabled="disabled" />
<link id="winclassic-tab-style-sheet" type="text/css" rel="stylesheet" href="css/tab.winclassic.css" disabled="disabled" />
<!-- 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>
<script type="text/javascript" src="js/tabpane.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
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">
//<![CDATA[
setupAllTabs();
//]]>
</script>
</body>
</html>
最后，还是打包给大家下载吧，好东西大家一起分享与研究
