可点击的下拉菜单


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{ float:left;}
.box{ width:335px; height:auto;}
.mainBox{ width:335px; height:auto; border:1px #ccc solid; }
.navbox{ width:335px; height:auto;}
.navborder_right {border-right: 1px solid #bbb;}
.navborder_left {border-left: 1px solid #bbb;}
.pro_boxNone{ width:335px; height:200px; display:none; padding:10px;}
.pro_box{ width:335px; height:200px; overflow:hidden;padding:10px;}
.navon {width: 65px;height: 21px;background: #000; color:fff; font-family:"宋体"; font-size:12px; text-align:center; padding:5px 0 0 0;}
.navon a{ color:#fff; text-decoration:none; font-weight:bold;}
.navon a:hover{ color:red;}
.navun {width: 65px;height: 21px;background: #fff;font-family:"宋体"; font-size:12px; text-align:center; padding:5px 0 0 0;}
.navun a{ color:#000;font-weight:bold; text-decoration:none;}
.navun a:hover{color:red;}
</style>
<script type="text/javascript">
function toggleHot(encodeTag) {
 tabsDiv = document.getElementById('hotTabs');
 tabs = tabsDiv.childNodes;
 isPrevious = true;
 for(tab in tabs) {
  if(tabs[tab].nodeType!=1) {
   continue;
  }
  if(tabs[tab].id == 'tagtab_'+encodeTag) {
   tabs[tab].className = 'navon';
   isPrevious = false;
  }
  else {
   if(isPrevious) {
    tabs[tab].className=tabs[tab].className = 'navun';
   }
   else {
    tabs[tab].className=tabs[tab].className = 'navun';
   }
  
  }
 }
 
 prodDiv = document.getElementById('hotProd');
 divs = prodDiv.childNodes;
 for(p in divs) {
  if(divs[p].nodeType!=1) {
   continue;
  }
  if(divs[p].id == 'hotpro_'+encodeTag) {
   divs[p].style.display = "block";
  }
  else {
   divs[p].style.display = "none";
  }
 }
 
}
</script>
</head>
<body>
<div class="box">
<div id="hotTabs" class="navbox">
<div id="tagtab_showA" class="navon " onclick="toggleHot('showA');"><a href="#" onclick="return false">导航一</a></div>
<div id="tagtab_showB" class="navun" onclick="toggleHot('showB');"><a href="#" onclick="return false">导航二</a></div>
<div id="tagtab_showC" class="navun" onclick="toggleHot('showC');"><a href="#" onclick="return false">导航三</a></div>
<div id="tagtab_showD" class="navun" onclick="toggleHot('showD');"><a href="#" onclick="return false">导航四</a></div>
<div id="tagtab_showE" class="navun " onclick="toggleHot('showE');"><a href="#" onclick="return false">导航五</a></div>
</div>
<div class="mainBox" id="hotProd">
<div class="pro_box" id="hotpro_showA" >内容一</div>
<div class="pro_boxNone" id="hotpro_showB" >内容二</div>
<div class="pro_boxNone" id="hotpro_showC" >内容三</div>
<div class="pro_boxNone" id="hotpro_showD" >内容四</div>
<div class="pro_boxNone" id="hotpro_showE" >内容五</div>

</div>
</div>
</body>
</html>

posted @ 2008-11-02 15:04  Lee Vane  阅读(248)  评论(0)    收藏  举报