实例:利用CSS和JavaScript实现的动态导航效果
5050 点击·0 回帖
灯火互联
楼主
 |  | |
 | 图片：58_3710_15ca12c76b4f940.jpg  [pre]<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>[/pre]javaScript代码 [pre]<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.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>[/pre]HTML代码 | |
 |  |