<style type="text/css">
body {
    font-size:1em;
    line-height:170%;
    text-align:center;
    margin-top:100px
}
* {
    margin:0;
    padding:0
}
ul, li {
    list-style:none
}
div {
    width:500px;
    height:auto;
    margin:0px auto
}
li {
    float:left;
    padding:0 10px;
    height:30px;
    line-height:30px;
    font-weight:bold;
    cursor:pointer;
    color:#000;
    background:#FFC
}
.default {
    color:#000;
    background:#FFC
}
.current {
    color:#FFF;
    background:#369
}
.ctn {
    border:1px solid #369
}
.ctn p {
    display:none
}
</style>
<script language="JavaScript" type="text/javascript">
function changeClips() {
for (i=1; i<6; i++){
  var allCtn="ctn"+i;
  var allTtl="ttl"+i;
  document.getElementById(allCtn).style.display="none";
  document.getElementById(allTtl).className="default";
  }
}function ttlOn(n) {
var curCtn="ctn"+n;
var curTtl="ttl"+n;
changeClips();
document.getElementById(curCtn).style.display="block";
document.getElementById(curTtl).className="current";
scrollCount=n;
}</script>
<div>
  <ul>
    <li id="ttl1" onclick="ttlOn(1); return false;" class="current">Title01</li>
    <li id="ttl2" onclick="ttlOn(2); return false;">Title02</li>
    <li id="ttl3" onclick="ttlOn(3); return false;">Title03</li>
    <li id="ttl4" onclick="ttlOn(4); return false;">Title04</li>
    <li id="ttl5" onclick="ttlOn(5); return false;">Title05</li>
  </ul>
</div>
<div class="ctn">
  <p id="ctn1" style="display:block">星期一<br />111</p>
  <p id="ctn2">星期二<br />222</p>
  <p id="ctn3">星期三<br />333</p>
  <p id="ctn4">星期四<br />444</p>
  <p id="ctn5">星期五<br />555</p>
</div>