个人感觉逻辑还是比较强的,初学的话要有足够的耐心,不过搞清楚原理以后还是比较简单.代码注释已经写在源文件里. 经过测试已经兼容:ie6,7,8 ff 其他浏览器没有做测试
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript选项卡</title>
<style type="text/css">
body{font-size:12px;}
body,ol,li,div{margin:0;padding:0;}
a:link{color:#000; text-decoration:none;}
a:hover{ text-decoration:underline;}
a:visited{color:#000; text-decoration:none;}
ol{list-style:none;}
.tab{width:200px;}
.menubar ,.show_content{ border:#006600 1px solid; width:99.5%;}
.menubar{height:30px; margin:10px}
.show_content{height:200px; margin:10px;}
.menubar ol{width:99.5%;}
.menubar ol li{float:left; margin-left:10px;}
.c_show{display:block}
.c_hidden{display:none;}
.m_color{color:#006600; font-weight:bold;}
.v_color{color:#000; text-decoration:none;}
</style>
</head>
<body>
<div class="tab">
<div class="menubar" id="menubar">
<ol>
<li id="x_1" class="m_color"
<li id="x_2"
<li id="x_3"
<li id="x_4"
</ol>
</div>
<div class="show_content">
<p class="c_show" id="y_1">这是一</p>
<p class="c_hidden" id="y_2">这是二</p>
<p class="c_hidden" id="y_3">这是三</p>
<p class="c_hidden" id="y_4">这是四</p>
</div>
</div>
<script>
/*  作者：chris.jie
*  日期：2009.4.17
*  作品：超级简单js选项卡切换,思路：样式切换
*/
function $(o) {return document.getElementById(o);} //创建带有参数 n 的函数 $ 来获取元素的id值
function m_switch(n){ //通过鼠标事件间传递参数
   for(var i=1;i<5;i++){
     $("x_" + i).className ='v_color'  
     $("y_" + i).className ='c_hidden';  //这里其实都不显示，因为js代码是一行一行执行，所以下面最终会显示出来
   }
     $("y_" + n).className = 'c_show'; //例如：鼠标事件 发生， 则 调用显示样式
     $("x_" + n).className = 'm_color'; //调用字体样式
}
</script>
</body>
</html>