代碼夠亂，湊合著看吧。
------------------------------------------------
JS：
<script type="text/javascript">
<!--
function showLayer(group, id)
{
//處理Item
var count = 1;
var obj = document.getElementById(group + "_item_" + count);
while (obj != null)
{
obj.className = "panel_item";
count++;
obj = document.getElementById(group + "_item_" + count);
}
document.getElementById(group + "_item_" + id).className = "panel_item_show";
//處理Layer
count = 1;
obj = document.getElementById(group + "_layer_" + count);
while (obj != null)
{
obj.style.display = "none";
count++;
obj = document.getElementById(group + "_layer_" + count);
}
document.getElementById(group + "_layer_" + id).style.display = "block";
}
//-->
</script>
--------------------------------------------------------------
CSS：
/* panel begin */
.panel
{
border-left:1px solid #C1D5F1;
border-right:1px solid #C1D5F1;
border-bottom:1px solid #C1D5F1;
} .panel_head
{
color:#004499;
height:24px;
line-height:24px;
}
.panel_item
{
float:left; border-top:1px solid #C1D5F1;
border-bottom:1px solid #C1D5F1;
background-color:#E7F1FF; text-align:center;
}
.panel_item_show
{
float:left; border-top:1px solid #C1D5F1;
background-color:#FFFFFF; font-weight:bold; text-align:center;
} .panel_item_spacing
{
float:left; height:25px; border-left:1px solid #C1D5F1;
border-right:1px solid #C1D5F1;
border-bottom:1px solid #C1D5F1;
} .panel_body
{
clear:both;
} .panel_foot
{
}
/* panel end */
-----------------------------------------------------------
HTML：
<div class="panel" style="width:250px;">
<div class="panel_head">
<div id="t_item_1" class="panel_item_show" style="width:56px;" onmouseover="showLayer('t', 1);">暈暈</div>
<div class="panel_item_spacing" style="width:6px;"></div>
<div id="t_item_2" class="panel_item" style="width:56px;" onmouseover="showLayer('t', 2);">汗汗</div>
<div class="panel_item_spacing" style="width:6px;"></div>
<div id="t_item_3" class="panel_item" style="width:56px;" onmouseover="showLayer('t', 3);">呵呵</div>
<div class="panel_item_spacing" style="width:6px;"></div>
<div id="t_item_4" class="panel_item" style="width:56px;" onmouseover="showLayer('t', 4);">哈哈</div>
</div>
<div class="panel_body">
<div id="t_layer_1">
<p>1</p>
</div>
<div id="t_layer_2" style="display:none;">
<p>2</p><p>2</p>
</div>
<div id="t_layer_3" style="display:none;">
<p>3</p><p>3</p><p>3</p>
</div>
<div id="t_layer_4" style="display:none;">
<p>4</p><p>4</p><p>4</p><p>4</p>
</div>
</div>
</div> |
