Question

我通过html和css创建了一个简单的按钮。当用户鼠标悬停在href链接上时，背景图像会出现。我希望鼠标悬停状态应该保留，当点击下面的href链接是我的代码希望你会理解我想要的，简单的我想要选择或突出显示按钮脚本。

<!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" />
<style type="text/css">
#top-Tabs{
    width:918px;
    float:left;
    margin-top: 11px;
    font-size: 12px;
    text-decoration: none;
    margin-left: 60px;
    height: 29px;
}

    .tab-content {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
        text-decoration: none;
        float: left;
        height: 29px;
        line-height: 29px;
        width: 89px;
        text-align: center;
        margin-right: 5px;
        margin-left: 5px;
    }

    .tab-content a{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        display:block;
    }

    .tab-content a:hover{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #fff;
        text-decoration: none;
        background-image: url(images/top-tab-hover.jpg);
        background-repeat: no-repeat;
        display:block;
    }


    </style>
    </head>

    <body>

    <!--Top Tabs Starts -->
    <div id="top-Tabs">
    <div class="tab-content"><a href="#">Calls Made</a></div>
    <div class="tab-content"><a href="#">Leads</a></div>
    </div> <!--Top Tabs  End -->
    </body>
    </html>

Best -Khurram

Answer 1

如果您要突出显示当前选中的标签，则只需在css中添加另一个选择器，例如：Tab Active state

并将该类添加到当前活动的链接中，如示例所示。

需要选择/突出显示状态脚本

1 个答案: