表形式のメニューを作りたい。それぞれが特定の div 要素を持つ 5 つのタブがあります。tab1 などのタブをクリックすると、id tab1 の div 要素がクラスのコンテンツを取得し、他の div のクラスが削除されますが、機能していないようです
<script src="js/jquery.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;}
.clear {clear:both;}
a img {border:none;}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:1px solid #f5ab36;
}
ul li {float:left;}
ul li a {
background:#ffd89b;
color:#222;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:1px solid #f5ab36;
border-top:1px solid #f5ab36;
border-right:1px solid #f5ab36;
}
ul li a.selected
{
border-bottom:1px solid #fff;
color:#344385;
background:#fff;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:20px 0;
color:#fff;
}
#navigation {width:602px; margin: 0 auto;}
.content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;}
#logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;}
.remove
{
display:none;
}
</style>
</head>
<body>
<h1>Simple tabbed menu</h1>
<div id="navigation">
<ul>
<li ><a href="javascript:void(0);" id="1" class="">Tab 1</a></li>
<li><a class="" href="javascript:void(0);" id="2">Tab 2</a></li>
<li><a class="" href="javascript:void(0);" id="3">Tab 3</a></li>
<li><a class="" href="javascript:void(0);" id="4">Tab 4</a></li>
<li><a class="selected" href="javascript:void(0);" id="5">Tab 5</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="remove1">
<div id="tab1" class="">
pannel doesn't always shows everythings
</div>
<div id="tab2" class="">
this is not a favorit glass
</div>
<div id="tab3" class="">Oh my god we don't have such strong idea</div>
<div id="tab4" class="">my favorit pannel is hear</div>
<div id="tab5" class="">Do not talk too much</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#remove1 div').addClass('remove');
$('#remove1 div').removeClass('content');
$('#navigation ul a').click(function(){
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
if($(this).attr('id')==1)
{
$('#remove1 div').addClass('remove');
$('#tab1').addClass('content');
}
else if($(this).attr('id')==2)
{
$('#remove1 div').addClass('remove');
$('#tab2').addClass('content');
}
else if($(this).attr('id')==3)
{
$('#remove1 div').addClass('remove');
$('#tab3').addClass('content');
}
else if($(this).attr('id')==4)
{
$('#remove1 div').addClass('remove');
$('#remove1 div').removeClass('content');
$('#tab4').addClass('content');
}
else if($(this).attr('id')==5)
{
$('#remove1 div').addClass('remove');
$('#tab5').addClass('content');
}
});
});
</script>
</body></html>
すべての div 要素を非表示にし、特定の div を表示することが期待される要素をクリックすると、何もしません。