开发者

Selected/highlight state script required

I have made one simple button through html and css. when user mouseover on href link the background image comes. i want mouseover state should remain when some one click on the href link below is my code hope you will understand what i want, in simple i want selected or highlight button script.

<!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:b开发者_如何学JAVAlock;
    }

    .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


If you mean to highlight the currently selected tab, you just have to add another selector to the css like in this example: Tab Active state

And add the class to the currently active link as in the example.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜