divエリアの表示切り替え（DOMとCSSの初期化）

JavaScript 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" charset="shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript" charset="shift_jis" />
<title>divエリア表示切り替え</title>


<link type="text/css" href="./reset.css" rel="stylesheet" media="all" id="mycss"/>
<script src="iccr-ml.js" type="text/javascript"></script>
<script language="JavaScript">
</script>

<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>

</head>
<body>

<div class="tabbox">
   <ul class="tabs">
      <li class="tab" id="tabA"><a href="#tab1" onclick="FocusTab('tabA','#FF5599'); ChangeTab('tab1'); return false;">タブ１</a></li>
      <li class="tab" id="tabB"><a href="#tab2" onclick="FocusTab('tabB','#FFFF99'); ChangeTab('tab2'); return false;">タブ２</a></li>
      <li class="tab" id="tabC"><a href="#tab3" onclick="FocusTab('tabC','#FFFF99'); ChangeTab('tab3'); return false;">タブ３</a></li>
   </ul>
   
   <div id="tab1">
      <p class="tabhead">タブ１</p>
      <p>タブ１タブに対応するボックス（中身）</p>
   </div>
   <div id="tab2">
      <p class="tabhead">タブ２</p>
      <p>タブ２タブに対応するボックス（中身）</p>
   </div>
   <div id="tab3">
      <p class="tabhead">タブ３</p>
      <p>タブ3に対応するボックス（中身）</p>
   </div>
</div>

<script type="text/javascript"><!--
   // デフォルトのタブを選択
   FocusTab('tabA','#FFFF99');
   ChangeTab('tab1');
// --></script>
</body>
</html>
----------------------------

<style type="text/css"><!--
   /* ▼表示領域全体 */
   div.tabbox {
      margin: 100px;
      padding: 0px;
      width: 400px; /* 全体の横幅 */
   }
   /* ▼タブ部分 */
   div.tabbox ul.tabs {
      margin:  0px; /* 外側の余白を消す */
      padding: 0px; /* 内側の余白を消す */
   }
   div.tabbox ul.tabs li {
      margin: 0px;  /* 各項目周囲の余白をなくす */
      padding: 0px; /* 各項目内側の余白をなくす */
      list-style-type: none; /* 先頭記号を消す */
      width: 120px; /* タブのデフォルトの横幅 */
   }
   div.tabbox ul.tabs a {
      display: block;  /* ブロックレベルに */
      padding: 5px 0px;      /* 内側の余白 */
      height: 20px;          /* タブの高さ */
      text-align: center;    /* 中央寄せ */
      text-decoration: none; /* 下線を消す */
   
   }
 
   div.tabbox ul.tabs a:link,
   div.tabbox ul.tabs a:visited {
      color: #000; /* タブの文字色(白) */
   }
   div.tabbox ul.tabs a:hover {
      /* タブにマウスを載せた際の装飾 */
      color: #333999;              /* 黄色 */
      text-decoration: underline; /* 下線 */
      
   }
    
   /* ▼タブに対応するボックス領域 */
   div.tabbox div.tab {
      height: 150px;  /* ボックスの横幅 */
      overflow: auto; /* スクロールバー自動表示 */
     
   }
  /* ///////////////////////////////////*/
 
   /* ▼ボックス内部の装飾(今回のテクニックとは無関係) */
   div.tabbox div.tab p { margin: 0.5em; }
   div.tabbox div.tab p.tabhead {
      font-weight: bold; border-bottom: 3px double gray;
   }

#tabA{
	color:#3339ff;
}
-----------------------------------
   function FocusTab(tabname,tabcolor) {
      // タブの色
      // 全部白
      
      /*
      Enumeration<String> names = request.getParameterNames();
            
      while(names.hasMoreElements()){
      	String name = names.nextElement();
      	String[] values = request.getParameterValues(name);
      	for(int i=0; i< values.length; i++){
      		out.println(name + "=" + values[i]);
      	}
      }
      */
      
      document.getElementById('tabA').style.backgroundColor = 'White';
      document.getElementById('tabB').style.backgroundColor = 'White';
      document.getElementById('tabC').style.backgroundColor = 'White';
      // 指定箇所のみ色を変更
      if(tabname) {
         document.getElementById(tabname).style.backgroundColor = tabcolor;
		//document.getElementById(tabname).style.color = tabcolor;

		//document.getElementById(tabname).style.Color = 'White';
      }
   }

   // タブボックスの中身
   function ChangeTab(tabname) {
      // 全部消す
      document.getElementById('tab1').style.display = 'none';
      document.getElementById('tab2').style.display = 'none';
      document.getElementById('tab3').style.display = 'none';
      // 指定箇所のみ表示
      if(tabname) {
         document.getElementById(tabname).style.display = 'block';
      }
   }