源代码
<!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" />
<script type="text/javascript" src="images/cf_tags.js"></script>
<title>无标题文档</title>
<style>
.menu_item_default{
color:#609;
}
.menu_item_default a{
color:#009;
}
.menu_item_default a:hover{
color:#900;
}
.menu_item_selected{
color:#fF0;
}
.menu_item_selected a{
color:#fF0;
}
.menu_sub_item_area{
position:absolute;
display:none;
text-align:left;
}
.menu_sub_item{
color:#F00;
}
.menu_sub_item a{
color:#F00;
}
</style>
</head>
<body>
<div id="menu_area">
<ul>
<li class="menu_item_default">
<a href="category.php?id=1" class="menu_item_a">生鲜蔬菜</a>
</li>
<div id="menu_sub_item_area_1" class="menu_sub_item_area" style="left:0px; top:100px;">
<dl>
<dt class="menu_sub_item">
<a href="category.php?id=13">蔬菜</a>
</dt>
<dt class="menu_sub_item">
<a href="category.php?id=13">蔬菜</a>
</dt>
<dt class="menu_sub_item">
<a href="category.php?id=13">蔬菜</a>
</dt>
</dl>
</div>
<li class="menu_item_default">
<a href="category.php?id=1" class="menu_item_a">生鲜蔬菜2</a>
</li>
<div id="menu_sub_item_area_2" class="menu_sub_item_area" style="left:0px; top:300px;">
<dl>
<dt class="menu_sub_item">
<a href="category.php?id=13">蔬菜2</a>
</dt>
</dl>
</div>
<li class="menu_item_default">
<a href="category.php?id=1" class="menu_item_a">生鲜蔬菜3</a>
</li>
<div id="menu_sub_item_area_3" class="menu_sub_item_area" style="left:0px; top:500px;">
<dl>
<dt class="menu_sub_item">
<a href="category.php?id=13">蔬菜3</a>
</dt>
</dl>
</div>
</ul>
</div>
<script type="text/javascript">selectTag("menu_area", "menu_sub_item_area_", "menu_item_default", "menu_item_selected");</script>
</body>
</html>
cf_tags.js
// JavaScript Document
/**
*
*/
function selectTag(tags_group_id, tab_prefix, tag_default_style, tag_selected_style){
var cf_tag_card = document.getElementById( tags_group_id ).getElementsByTagName("li");
var tags_num = cf_tag_card.length;
for(var i=0;i<tags_num;i++){
cf_tag_card[i].index = i;
cf_tag_card[i].onmouseover = function(){
for(var j=0;j<tags_num;j++){
cf_tag_card[j].className = tag_default_style;
document.getElementById( tab_prefix+(j+1) ).style.display = "none";
}
document.getElementById( tab_prefix+(this.index+1) ).style.display = "block";
cf_tag_card[this.index].className = tag_selected_style;
}
cf_tag_card[i].onclick = function(){
for(var j=0;j<tags_num;j++){
cf_tag_card[j].className = tag_default_style;
document.getElementById( tab_prefix+(j+1) ).style.display = "none";
}
document.getElementById( tab_prefix+(this.index+1) ).style.display = "block";
cf_tag_card[this.index].className = tag_selected_style;
}
cf_tag_card[i].onmouseout = function(){
for(var j=0;j<tags_num;j++){
cf_tag_card[j].className = tag_default_style;
document.getElementById( tab_prefix+(j+1) ).style.display = "none";
}
}
}
}