演示效果截图

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.865171.cn">www.865171.cn</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>

效果演示/代码下载

在线演示
源码下载