Help with Tabbed interface
Hello, long time reader first time poster, I would like to preface this by saying i am very well aware that there are many existing tab scripts/plugins, that is not what Im looking for, I would like to
why mine isnt working,
that being said, here we go:
-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#wrapper{
margin:0;
padding:0;
width:504px;
height:20px;
margin-left:auto;
margin-right:auto;
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
width:100px;
float:left;
height:20px;
/*background-image:url("images/up.png");*//****Local image file****/
background-color:Red;
text-align:center;
text-transform:uppercase;
border-bottom:2px solid black;
font-family:Myriad Pro Cond;
}
ul li.selected{
/*background-image:url("images/selected.png");*//****Local image file****/
background-color:Blue;
border:2px solid black;
border-bottom:none;
font-style:italic;
font-weight:bold;
}
.cont{
width:500px;
height:400px;
background-color:#f2f3f9;
border:2px solid black;
}
.contvis{
width:500px;
height:400px;
background-color:#f2f3f9;
border:2px solid black;
display:none;
}
#container{
width:504px;
margin-left:auto;
margin-right:auto;
}
</style>
<script src="javascript/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function() {
$(this).addClass("selected");
$(this).siblings("li").removeClass("selected");
var id = "#my" + $(this).attr("id");
$("div").siblings(".contvis").css({ "display": "none" });
$("" + id + "").css({ "display": "block" });
});
});
</script>
</head>
<body>
<div id="container">
<div id="wrapper"><!--**menu wrapper**-->
<ul>
<li id="1" class="selected">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
<li id="4">Four</li>
<li id="5">Five</li>
</ul>
</div>
<div id="my1" class="contvis">A
</div>
<div id="my2" class="contvis">B
</div>
<div id="my3" class="contvis">C
</div>
<div id="my4" class="contvis">D
</div>
<div id="my5" class="contvis">E
</div>
</div>
</body>
</html>
so, as you can see once loaded there is no content visible, but once you click on of the "li" elements, is corresponding content div becomes visible, the only thing is that i would like it to have a default visible content div (for simplicity sake lets say the first one). How would this be achieved?
Oh, and one more thing, I have tried to assign a class to the content divs where as all but one have a class setting there "display" element to "none", and using a addClass function to change the classes based on which associated list element was clicked, but that didnt seem to work (one div would become visible once then they wouldn't change).
You can see in my inline style that i had two classes for the content divs, and instead of "$(misc).css({}) i made them (the sibling statment and the selected div statment) $(misc).siblings(misc).removeClass(""), and $(misc).addClass(""))
Anyways, sorry about the long winded post i wanted to make sure I got it all out there, any help anyone can offer would be very appreciated, thanks.