I've been struggling with this issue for a while now and here's the code I have so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="javascript:void(1);" id="tab1"><font color="white">Tab 1</a></li>
<li><a href="javascript:void(2);" id="tab2"><font color="white">Tab 2</a></li>
<li><a href="javascript:void(3);" id="tab3"><font color="white">Tab 3</a></li>
<li><a href="javascript:void(4);" id="tab4"><font color="white">Tab 4</a></li>
<li><a href="javascript:void(5);" id="tab5"><font color="white">Tab 5</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You've chosen Tab 1</p>
<p>Check the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You've selected ' + $(this).html());
});
});
</script>
</body>
</html>
I'm having trouble getting one of these tab menu things to work, I've tried numerous methods but nothing seems to be working.