页内区域栏目导航设计(标签Tab)

<style>
.tabs {
    background:#09C;
    padding-left:10px;
    height:22px;
    padding-top:1px;
}

.tabs p {
    margin:1px 0 0 0;
}

.tab-normal {
    color:#FFF;
    line-height:20px;
    padding:4px 15px 4px 18px;
    border-right:1px solid #FFF;
    cursor:pointer;
}

.tab-hover {
    color: #FFF;
    background:#6CF;
    line-height:20px;
    padding:4px 15px 4px 18px;
    border-right:1px solid #FFF;
    cursor:pointer;
}

.tab-current {
    background:#6CF;
    line-height:20px;
    font-weight:700;
    padding:4px 15px 4px 18px;
    border-right:2px solid #FC6;
    cursor:pointer;
}
</style>

<script language="javascript">
<!--

var JS = new Object();

JS.srcElement = function( e ) {
    if ( typeof e == "undefined" ) e = window.event;
    var src = document.all ? e.srcElement : e.target;
    return src;
}

JS.parentElement = function( o ) {
    if ( typeof o == "undefined" ) return;
    var parent = document.all ? o.parentElement : o.parentNode;
    return parent;
}

JS.childNodes = function( o ) {
 var oChildNodes = o.childNodes;
 var oNodes = new Array();
 var j = 0;
 for ( var i = 0; i < oChildNodes.length; i++ ) {
  if ( typeof oChildNodes[i].tagName == 'undefined' ) continue;
  oNodes[j++] = oChildNodes[i];
 }
 return oNodes;
}

JS.id = function( id ) {
 return document.getElementById( id );
}

var Tab = function( sTab, sArea ) {
 this._sName = sTab;
 this._sAreaName = sArea;

 this._sClassNormal = 'tab-normal';
 this._sClassHover = 'tab-hover';
 this._sClassCurrent = 'tab-current';

 this._sPrefix = 'tabs_';
 this._sAreaPrefix = 'tab_';
 
 this.setClass = function( sNormal, sHover, sCurrent ) {
  this._sClassNormal = sNormal;
  this._sClassHover = sHover;
  this._sClassCurrent = sCurrent;
 }

 this.setPrefix = function( sPrefix, sAreaPrefix ) {
  this._sPrefix = sPrefix;
  this._sAreaPrefix = sAreaPrefix;
 }

 this.exgAreaClass = function( oSrc ) {
  var oArea = JS.id( this._sAreaName );
  var oChildNodes = JS.childNodes( oArea );
  for ( var i = 0; i < oChildNodes.length; i++ ) {
   if ( eval( "/^" + this._sAreaPrefix + "/" ).test( oChildNodes[i].id ) ) {
    if ( oChildNodes[i].id == this._sAreaPrefix + oSrc.id.substr( oSrc.id.indexOf( "_" ) + 1 ) )
     oChildNodes[i].style.display = 'block';
    else oChildNodes[i].style.display = 'none';
   }
  }
 }

 this.exgClass = function( oSrc ) {
  var oParent = JS.parentElement( oSrc );
  var oChildNodes = JS.childNodes( oParent );
  for ( var i = 0; i < oChildNodes.length; i++ ) {
   if ( eval( "/^" + this._sPrefix + "/" ).test( oChildNodes[i].id ) ) {
    if ( oChildNodes[i].id == oSrc.id )
     oChildNodes[i].className = this._sClassCurrent;
    else oChildNodes[i].className = this._sClassNormal;
   }
  }
 }

 TabEvents( this );
}

var TabEvents = function( oTab ) {
 this._oTab = JS.id( oTab._sName );

 this._oTab.onmouseover = function( e ) {
  var obj = JS.srcElement( e );
  if ( obj.className == oTab._sClassNormal ) obj.className = oTab._sClassHover; 
 }

 this._oTab.onmouseout = function( e ) {
  var obj = JS.srcElement( e );
  if ( obj.className == oTab._sClassHover ) {
   obj.className = oTab._sClassNormal;
  }
 }

 this._oTab.onclick = function( e ) {
  var oSrc = JS.srcElement( e );
  if ( !eval( "/^" + oTab._sPrefix + "/" ).test( oSrc.id ) ) return;
  oTab.exgAreaClass( oSrc );
  oTab.exgClass( oSrc );
 }
}
//-->
</script>

<div id="tabs_main" class="tabs"><p>
<span class="tab-current" id="tabs_test1">1</span>
<span class="tab-normal" id="tabs_test2">2</span>
<span class="tab-normal" id="tabs_test3">3</span>
</p></div>

<script language="javascript">
<!--
var oTab = new Tab( "tabs_main", "tab_main" );
//oTab.setClass( sNormal, sHover, sCurrent );
//oTab.setPrefix( sPrefix, sAreaPrefix );
//-->
</script>

<div id="bottom">

<form method="post" action="">
<div id="tab_main">
<div id="tab_test1" style="display:block">
<table><tbody>
<tr><td>
 <input type="text" name="t1" value="" />
</td></tr>
<tr><td>
 <input type="button" name="sub" value="GO" />
</td></tr>
</tbody></table>
</div>
<div id="tab_test2" style="display:none">
test22
</div>
<div id="tab_test3" style="display:none">
test333
</div>
</div>
</form>

</div>