一个简单的标签例子

最新推荐文章于 2023-09-22 13:58:01 发布

原创最新推荐文章于 2023-09-22 13:58:01 发布 · 447 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用纯CSS实现的标签栏交互效果示例，包括样式定义与JavaScript交互代码。该示例通过鼠标悬停事件展示不同的隐藏内容区域。

<style>
.indexgg {
     width:340px; 
     height:35px; 
     border-left:1px solid #ccc;
     float: left;
     cursor:pointer;}

.indexgg span p {
        text-align: center;
        width:103px; 
        height:35px; 
        line-height:35px; 
        background:#ccc; 
        float:left; 
        border-right: 1px solid white; }

.indexgg span p:hover { 
        height:34px;
        background:#fff; 
        border-top:1px solid #ff6599;
        color: red; }
.slide { 
        width:190px; 
        border-top:none; 
        height:150px; 
        list-style:none; 
        color:white; 
        padding-left:10px;
        top:10px}

.slide a{ 
        text-decoration:none; 
        font-size:13px;
        color: black;
        position: relative;
        top:10px;}
.slide a:hover{
        color:red;
        text-decoration: underline;}
</style> 



<div class="indexgg">
    <span onmousemove="JavaScript:gb_ChangeDiv('0','JKDiv_')"><p>公告</p></span>
    <span onmousemove="JavaScript:gb_ChangeDiv('1','JKDiv_')"><p>公告</p></span>
    <span onmousemove="JavaScript:gb_ChangeDiv('2','JKDiv_')"><p>公告</p></span>
</div>




    <div class="slide">
        <div id="JKDiv_0"  style="display: block;">
            <a href="/gonggao_view.php?id=9">
                1、申请提现后什么时候到账？
            </a>
            <a href="/gonggao_view.php?id=8">
                2、商家报名规则与要求
            </a>
        </div> 
        <div id="JKDiv_1" style="display: none;" >
        <a href="/help_view.php?id=35">试客参与活动流程</a>
        </div> 
        <div id="JKDiv_2" style="display: none;">
        <a href="/help_view.php?id=35">试客参与活动流程</a>
        </div> 
    </div>





<script language="JavaScript" type="text/javascript"> 
function gb_ChangeDiv(divId,divName) 
{ 
 for(i=0;i<=2;i++)
 {
     document.getElementById(divName+i).style.display="none"; 
 }
 document.getElementById(divName+divId).style.display="block"; 
} 
</script>