<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>
<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>
上一篇:有序列表ol分页源码/样式
下一篇:无规则多张图片的垂直居中排版效果