タブメニューを作ってみた - babu_babu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>タブメニュー</title>

<style type="text/css">
#box0 {
  height: 200px;
  border: 3px #888 double;
  background-color:#ddf;
  margin-bottom: 1em;
}

#box0 div {
  height  :158px;
  padding : 4px;
  overflow: auto;
  clear   : both;
  overflow: auto;
}

#menu {
  width   : 100%;
  height  : 30px;
  margin  : 0;
  padding : 0;
  list-style-type : none;
  background-color: #aaa;
  border-bottom   : 3px #888 double;
}

#menu li {
  width   : 100px;
  float   : left;
}

#menu a {
  color  :#040;
  height :28px;
  display: block;
  text-indent  :1ex;
  border-width : 1px;
  border-style : solid;
  border-color : #ddd #888 #888 #ddd;
  background-color: #bbb;
  line-height  :28px;
}

.on {
  color        : #fff !important;
  border-width : 1px 1px 2px 1px !important;
  border-style : solid !important;
  border-color : #66a #ddd #ff0 #66a !important;
  background-color: #88c !important;
}

.on2 {
  background-color: #ccf !important;
}

</style>

<div id="box0">
  <ol id="menu">
    <li><a href="#menu0">menu0</a></li>
    <li><a href="#menu1">menu1</a></li>
    <li><a href="#menu2">menu2</a></li>
  </ol>
  <div id="menu0">menu.0</div>
  <div id="menu1">menu.1s</div>
  <div id="menu2">menu.2</div>
</div>
</div>

<hr>

<ol id="p">
  <li><a href="#p0">menu0</a></li>
  <li><a href="#p1">menu1</a></li>
  <li><a href="#p2">menu2</a></li>
</ol>
<div id="p0">page.0</div>
<div id="p1">page.1</div>
<div id="p2">page.2</div>

<hr>

<ol id="q">
  <li><a href="#q0">menu0</a></li>
  <li><a href="#q1">menu1</a></li>
  <li><a href="#q2">menu2</a></li>
</ol>
<div id="q0">page.0</div>
<div id="q1">page.1</div>
<div id="q2">page.2</div>

<script type="text/javascript">
//@cc_on

var TabMenu = { };

//タブメニューの追加
TabMenu.add = (function () {
  return function ( doc, pid, css, activeFunc ) {
    var h, p = doc.getElementById( pid );

    if(! p ) return;
    if( 'undefined' == typeof this.List ) {
      this.List = { };
      this.Initializer( doc );
    }
    this.List[ pid ] = { 'doc': doc, 'parent': p, 'css': css, 'cbFunc': activeFunc };
    this.View( p, this.getFragment( doc.location.href ) );
  };
})();


TabMenu.View = (function ( getCookie, setCookie, addClass, delClass ) {
  return function ( parent, target ) {
    var anchors = parent.getElementsByTagName( 'A' );
    var i, o, t, j;
    var pid = parent.id;
    var obj = this.List[ pid ];
    var doc = obj.doc;
    var flag = true;

    //文字列ならhrefから探す
    if( 'string' === typeof target ) {
      for( i = 0; o = anchors[ i++ ];  ) {
        if( target === this.getFragment( o.href ) ) {
          target = o, flag = false;
          break;
        }
      }
      if( flag ) target = null;
    }

    //指定がない場合 Cookeiから、なければ0番
    if( 'undefined' === typeof target || null === target ) {
      target = parseInt( getCookie.call( doc, pid ), 10 ) || 0;
    }

    //数値なら列番
    if( 'number' === typeof target ) target = anchors[ target ];

    for( i = 0;  o = anchors[ i++ ];  ) {
      if( t = obj.doc.getElementById( this.getFragment( o.href ) ) ) {
        if( o === target ) {
          t.style.display = 'block';
          addClass( o, obj.css );
          setCookie.call( doc, pid, i-1, 100 );
          j = t.id;
        } else {
          t.style.display = 'none';
          delClass( o, obj.css );
        }
      }
    }
    if( j && obj.cbFunc ) obj.cbFunc.call( this, j );
  };
})(

  //Cookieの読出し
  function ( name ) {
    name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' );
    var value = this.cookie.match( RegExp( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
    return value ? decodeURIComponent( value[1] ): '';
  },

  //Cookieの保存
  function ( name, value, day, path, domain ) {
    return this.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
    '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString( ) +
    '; ' + (path ? 'path=' + encodeURI( path ) + '; ': '') +
    (domain ? 'domain=' + encodeURI ( domain ) + '; ': '');
  },
  
  //class追加
  function ( node, cn ) {
    var i = 0, k, ks = cn.split( / +/ ), buf = [ ], str = ' ' + node.className + ' ';
    while( k = ks[ i++ ] ) if( 0 > str.indexOf( ' ' + k + ' ') ) buf.push( k );
    node.className += ' ' + buf.join(' ');
  },
  
  //class削除
  function ( node, cn ) {
    var i = 0, k, ks = node.className.split( / +/ ), buf = [ ], str = ' ' + cn + ' ';
    while( k = ks[ i++ ] ) if( 0 > str.indexOf( ' '+ k +' ' ) ) buf.push( k );
    node.className = buf.join(' ');
  }
);


//urlの'#'以降を取り出す
TabMenu.getFragment = (function ( ) {
  return function ( url ) {
    var fragment = url.match( /^.*#(.+)$/ );
    return fragment ? fragment[1]: null;
  };
})();


//クリックされた処理
TabMenu.Listener = (function ( hasParent ) {
  return function ( evt ) {
    var i, p, e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
    if( 'A' !== e.nodeName ) return;

    for( i in TabMenu.List ) {
      if( TabMenu.List[ i ].hasOwnProperty( 'parent' ) ) {
        if( (p = TabMenu.List[ i ].parent ) && hasParent( p, e ) ) TabMenu.View( p, e );
      }
    }
  };
})(
  //親が存在するか
  function ( p, n ) {
    return ( n = n.parentNode ) ? ( n === p ) ? true: arguments.callee( p, n ): false;
  }
);


//初期化
TabMenu.Initializer = (function ( ) {
  return function ( doc ) {
    doc./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
      'click', TabMenu.Listener, false );
  };
})();

//________________

TabMenu.add( document, 'menu', 'on' );
TabMenu.add( document, 'p', 'on2', active );
TabMenu.add( document, 'q', 'on2');

function active( id ) {
  //もしタグを開いたときに実行させたいのなら
}
</script>