问题来源：http://my.oschina.net/zui/tweet/678972
这个哥们要的效果如下：
Demo演示效果：
为方便我就直接使用了jQuery了，请保证机器能联网，或自行加载jQuery文件
实现代码如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DEMO</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $uli = $(".left li");
var $oli = $(".right li");
//初始化样式
$uli[0].style.background = '#006699';
$oli[0].style.display="block";
//each 遍历 add事件
$uli.each(function(n){
$(this).mouseover(function(){
//此处完全可以用 jQuery 的 removeClass 和 addClass 来做，不知道哪里出错了，就是不行。。可恶~~
for(i=0;i<$uli.length;i++)
{
if(i==n)
{
$uli[i].style.background = "#006699";
$oli[i].style.display = "block";
}else{
$uli[i].style.background = "#0099FF";
$oli[i].style.display = "none";
}
}//End for
})
})
})
</script>
<style>
*{ margin:0px; padding:0px;}
body{ background:#FFFFFF;}
ol,ul{ list-style:none; margin:0px;}
.box{ height:300px;}
.left{ width:20px; height:300px; background: #FFFFFF; float:left;}
.left li{ height:50px;margin-bottom:5px; background: #0099FF; color:#FFFFFF; text-align:center; line-height:50px;}
.right{ width:280px; height:300px; background: #006699; float:left; color:#FFFFFF; font-size:50px;}
.right li{ width:280px; height:300px; background:#006699; display:none; text-align:center}
</style>
</head>
<body>
<div class="box">
<ul class="left">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol class="right">
<li>Box1</li>
<li>Box2</li>
<li>Box3</li>
<li>Box4</li>
<li>Box5</li>
</ol>
</div>
</body>
</html>
