我目前正在为我正在从事的项目敲定一个简单的网站。我有两个选项卡控件。一个在页面右侧，一个在左侧。两者都有 3 个选项卡，单击时会显示不同的内容。我前一段时间创建了一个，它运行良好，我最近返回并尝试添加第二个。问题是，当页面加载时，第一个有效，但第二个加载时所有三个内容区域都显示在页面下方。奇怪的是，一旦我单击第二个控制器上的一个选项卡，只显示该选项卡，并且整个控件似乎像另一个控件一样正常工作。
我确定我犯了一个愚蠢的错误，但我似乎无法找到它。任何帮助将不胜感激。
我的代码如下：
<div id="graphWrapper">
<ul class="tabs">
<li><a href="#" class="defaulttab" rel="tabs1">Daily</a></li>
<li><a href="#" rel="tabs2">Gender</a></li>
<li><a href="#" rel="tabs3">Age</a></li>
</ul>
<div class="tab-content" id="tabs1">Graph Content 1</div>
<div class="tab-content" id="tabs2">Graph Content 2</div>
<div class="tab-content" id="tabs3">Graph Content 3</div>
</div>
<div id="reportWrapper">
<ul class="tabs2">
<li><a href="#" class="defaulttab2" rel2="tabsR1">Report 1</a></li>
<li><a href="#" rel2="tabsR2">Report 2</a></li>
<li><a href="#" rel2="tabsR3">Report 3</a></li>
</ul>
<div class="tab-content2" id="tabsR1">Report Content 1</div>
<div class="tab-content2" id="tabsR2">Report Content 2</div>
<div class="tab-content2" id="tabsR3">Report Content 3</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('.tabs2 a').click(function(){
switch_tabs2($(this));
});
switch_tabs($('.defaulttab'));
switch_tabs2($('.defaulttab2'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
chart3.invalidateSize();
chart4.invalidateSize();
chart5.invalidateSize();
}
function switch_tabs2(obj2)
{
$('.tab-content2').hide();
$('.tabs2 a').removeClass("selected2");
var id2 = obj2.attr("rel2");
$('#'+id2).show();
obj2.addClass("selected2");
}
</script>