一个html面板切换代码原创 (div+css+js)

最新推荐文章于 2025-07-08 13:19:39 发布

转载最新推荐文章于 2025-07-08 13:19:39 发布 · 2.8k 阅读

标签

#html #css #div #layer #class

html 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的面板切换效果。通过鼠标悬停在不同的面板项上，可以显示相应的面板内容，同时改变面板项的样式。代码包括了必要的JS交互逻辑、CSS样式设置及HTML结构。

一个html面板切换代码原创 (div+css+js)

代码够乱，凑合着看吧。
------------------------------------------------
JS：
    <script type="text/javascript">
    
    </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>