【发布时间】：2013-06-23 13:39:24
【问题描述】：
我想制作一个表格菜单。 我有五个选项卡，每个选项卡都有一个特定的 div 元素。 当我单击选项卡时，例如 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 的元素时，它什么也不做。
【问题讨论】：
-
请使用外部样式表
-
请创建一个 jsfiddle.net 来显示问题并描述发生了什么以及您希望发生什么。 Downvoters 给了菜鸟一个机会！
-
您的代码没有使用 jquery 的强大功能。只需重置所有同级并选择单击的选项卡
-
您总是添加类
remove，但永远不要删除它。一个元素的类是一个集合；当您再次添加某些内容时，它不会优先于其他内容。 -
我想，问题很明确。我不知道你为什么不明白我在说什么。我说我想做一个表格菜单。问题是当我点击菜单时 div 元素不显示。让我举个例子：当我点击第一个标签时，它应该会显示 id 为 tab1 的 div，但它不适合我。
标签： javascript jquery html css