编辑:已解决:ID 不能以数字开头。
我制作了一个带有标签的 div(2009 - 2013)。在应该显示内容的 div 中,我只写了年份来表明我的代码是否有效。
如果我写$('div#updates div.content div').hide();
,所有内容都会隐藏(就像它应该的那样),但如果我写$('div#updates div.content div#2009').show();
,什么也不会发生。有谁知道为什么(我认为选择器错误,但我检查了它并没有用。
HTML:
<div id="updates">
<div class="tabs">
<div id="2009">2009</div>
<div id="2010">2010</div>
<div id="2011">2011</div>
<div id="2012">2012</div>
<div id="2013">2013</div>
</div><br />
<div class="content">
<div id="2009">
2009
</div>
<div id="2010">
2010
</div>
<div id="2011">
2011
</div>
<div id="2012">
2012
</div>
<div id="2013" class="active">
2013
</div>
</div>
JS(jQuery):
$(document).ready(function(e) {
$('div#updates div.tabs div#2013').addClass("active");
$('div#updates div.tabs div').click(function(e) {
$('div#updates div.tabs div').removeClass("active");
$(this).addClass("active");
$('div#updates div.content div').hide();
});
$('div#updates div.tabs div#2009').click(function(e) {
$('div#updates div.content div#2009').show();
});
$('div#updates div.tabs div#2010').click(function(e) {
$('div#updates div.content div#2010').show();
});
$('div#updates div.tabs div#2011').click(function(e) {
$('div#updates div.content div#2011').show();
});
$('div#updates div.tabs div#2012').click(function(e) {
$('div#updates div.content div#2012').show();
});
$('div#updates div.tabs div#2013').click(function(e) {
$('div#updates div.content div#2013').show();
});
});
CSS:
div#updates div.tabs div{
float: left;
padding: 5px 10px 4px 10px;
background-color: #a90000;
border: 1px solid #600;
z-index: inherit;
position: relative;
margin-right: -1px;
cursor: default;
}
div#updates div.tabs div.active{
background-color: #f00;
border-bottom: none;
padding-bottom: 5px;
z-index: 10;
}
div#updates div.content{
background-color: #f00;
position: absolute;
top: 38px;
width:500px;
border: 1px solid #600;
padding: 10px;
z-index: 9;
}
div#updates div.content div{
display: none;
}
div#updates div.content div.active{
display: block;
}
/*opmaak berichten*/
div#updates div.content div h3{
color: #0f0;
font: 24px Impact , sans-serif;
text-decoration: none;
}