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.
精彩评论