我想制作一个表格菜单。 我有五个选项卡，每个选项卡都有一个特定的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的元素时，它不会做任何事情。
答案 0 :(得分：3)
您始终添加班级remove，但永远不会将其删除。元素的类是一个集合;当你再次添加某些内容时，它不会优先于其他内容。
你可以在任何地方复制并粘贴几个removeClass es（包括你为＃4所拥有的那个，但似乎已经忘记了其他地方），或者你可以使用连接来找到正确的元素：
var $links = $('#navigation a');
var $tabs = $('#remove1 > div');
$links.click(function(e) {
$links.removeClass('selected');
$(this).addClass('selected');
$tabs.removeClass('content').addClass('remove');
$('#tab' + this.id).addClass('content').removeClass('remove');
});
接下来，将其设为外部样式表并使用<link>元素链接到该样式表。之后，将display: none;设为默认设置，然后取出.addClass('remove')和.removeClass('remove')。 javascript:void(0)是非常不好的做法;取出id属性（您滥用;如果有的话，它应为data-id）并链接到实际标签：
<li><a href="#tab2">Tab 2</a></li>
然后停止在事件监听器结束时跟踪链接：
e.preventDefault();
并使用整个href属性而不是那种不那么好的连接：
$(this.getAttribute('href')).addClass('content');
最后，考虑到一个不错的浏览器，你应该完全drop jQuery and try plain old JavaScript。
答案 1 :(得分：2)
您忘记删除remove类，因此它会保持隐藏状态。不需要所有if语句，一个选项是向锚点添加data-tabid并将其用作显示div的id。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.0.js"></script>
<title>test</title>
<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" data-tabid="tab1" class="">Tab 1</a></li>
<li><a class="" href="javascript:void(0);" id="2" data-tabid="tab2">Tab 2</a></li>
<li><a class="" href="javascript:void(0);" id="3" data-tabid="tab3">Tab 3</a></li>
<li><a class="" href="javascript:void(0);" id="4" data-tabid="tab4">Tab 4</a></li>
<li><a class="selected" href="javascript:void(0);" id="5" data-tabid="tab5">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');
$("#tab5").addClass('content');
$('#tab5').removeClass('remove');
$('#navigation ul a').click(function () {
var tabID = this.getAttribute("data-tabid")
.toString();
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#remove1 div').addClass('remove');
$('#' + tabID).addClass('content');
$('#' + tabID).removeClass('remove');
});
});
</script>
</body></html>