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>

HTML代码

<h1>利用CSS和JavaScript实现的动态导航效果</h1><h3><a href="http://www.bm777.com/">CSS</a></h3><ul>  <li><a onclick="applySelectedTo(this);return false;"   href="#heartbreakHotel">DIV+CSS模板</a></li>  <li><a onclick="applySelectedTo(this);return false;"   href="#blueSuedeShoes">后台模板</a></li>  <li><a onclick="applySelectedTo(this);return false;"   href="#houndDog" class="selected">图片图标</a></li>  <li><a onclick="applySelectedTo(this);return false;"   href="#dontBeCruel">CSS代码</a></li>  <li><a onclick="applySelectedTo(this);return false;"   href="#teddyBear">CSS菜单</a></li></ul><div id="content">  <div id="heartbreakHotel">    <h2>DIV+CSS模板</h2>    <p>大量DIV+CSS布局的网页模板下载，提供免费、美观、	<br />易修改的DIV+CSS HTML模板下载服务。</p>  </div>  <div id="blueSuedeShoes">    <h2>后台模板</h2>    <p>大量实用、漂亮的后台模板下载，所有后台模板均系	<br />手工打造或修改，且均包含HTML文件。 </p>  </div>  <div class="on" id="houndDog">    <h2>图片图标</h2>    <p>提供大量GIF图片、GIF图片下载、GIF图标、GIF图标	<br />下载、GIF动画素材等图片下载服务。</p>  </div>  <div id="dontBeCruel">    <h2>CSS代码</h2>    <p>提供大量CSS代码、CSS代码示例、CSS代码教程、	<br />CSS代码特效等，供大家学习交流之用。</p>  </div>  <div id="teddyBear">    <h2>CSS菜单</h2>    <p>提供大量CSS菜单、CSS导航菜单、CSS菜单教程、	<br />CSS菜单代码等，供大家学习交流之用。 </p>  </div></div>