hi,
Currently i am trying to create a tabbed menu. For this I am using a parent(container) div with multiple divs inside it. Each corresponds to one tab and since all these tabs (divs) will have same implementations so I have used same class for each of them but different divs to differentiate between them. Now I want only one of the tabs to be selected at any instance. But I am not able to find out a way to do that. following is the html what I am using.
<html>
<head>
<title>jQuery 1.7.2</title>
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/logger.js"></script>
<Script type="text/javaScript">
$(document).ready(function() {
logging(this,"Creating Tabs.");
$("div#tab-1,div#tab-2,div#tab-3,div#tab-4,div#tab-5").hover(function(){
$(this).css("font-size","35px");
},function(){
$(this).css("font-size","24px");
});
$("div#tab-1,div#tab-2,div#tab-3,div#tab-4,div#tab-5").click(function(){
$(this).css("background-color","blue");
});
});
</Script>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#top
{
height: 20px;
}
.tabs
{
margin: 0;
padding-left: 200px;
padding-right: 200px;
height: 50px;
}
.subtabs
{
margin-left: 10px;
margin-right: 10px;
height: 50px;
width: 100px;
line-height: 50px;
text-align: center;
float: left;
font-size: 24px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bottom
{
height: 3px;
background-color: blue;
}
</style>
</head>
<body>
<div id="top"></div>
<div class="tabs">
<div class="subtabs" id="tab-1">tab1</div>
<div class="subtabs" id="tab-2">tab2</div>
<div class="subtabs" id="tab-3">tab3</div>
<div class="subtabs" id="tab-4">tab4</div>
<div class="subtabs" id="tab-5">tab5</div>
</div>
<div class="bottom"></div>
</body>
</html>
Can any one help me to select one tab at any time?