www.ruthmazo.com

CSS代码

<style type="text/css">
body { font-family:verdana; }
h3 a { color:#000;}
#content { float:left; width:400px; border:1px solid #ccc;
margin-left:20px; padding:2px 10px 10px 10px; }
ul { margin:0; padding:0; list-style: none;
width:200px;float:left; }
ul li { margin:0 0 1px 0; padding:0; }
ul li a {
 display:block;
 padding:8px;
 text-decoration:none;
 background: #eee;
 color: #039;
}
ul li a:hover {
 background: #ffc;
}
ul li a.selected {
 background: #c63;
 color:#fff;
}
#content div { display:none; }
#content div.on { display:block; }
</style>

JavaScript代码

<script type="text/javascript">
function applySelectedTo(link) {
 var ul = document.getElementsByTagName("ul")[0];
 var allLinks = ul.getElementsByTagName("a");
 for (var i=0; i<allLinks.length; i++) {
  allLinks[i].className = "";
 }
 link.className = "selected";
 var allDivs = document.getElementsByTagName("div");
 for (var k=0; k<allDivs.length; k++) {
  allDivs[k].className = "";
 }
 var lyricId = link.getAttribute("href").split("#")[1];
 lyricId = document.getElementById(lyricId);
 lyricId.className = "on";
}
</script>