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

最新推荐文章于 2021-06-22 10:44:45 发布

facepp

最新推荐文章于 2021-06-22 10:44:45 发布

阅读量2.7k

点赞数

分类专栏： html 文章标签： html css div layer class float

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一个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;" οnmοuseοver="showLayer('t', 1);">晕晕</div>
                        <div class="panel_item_spacing" style="width:6px;"></div>
                        <div id="t_item_2" class="panel_item" style="width:56px;" οnmοuseοver="showLayer('t', 2);">汗汗</div>
                        <div class="panel_item_spacing" style="width:6px;"></div>
                        <div id="t_item_3" class="panel_item" style="width:56px;" οnmοuseοver="showLayer('t', 3);">呵呵</div>
                        <div class="panel_item_spacing" style="width:6px;"></div>
                        <div id="t_item_4" class="panel_item" style="width:56px;" οnmοuseοver="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>