<div id="tabs">
<div id="tab_one">
Something here
</div>
<div id="tab_two">
Something else here
</div>
<div id="tab_three">
Another thing here
</div>
</div>
现在我的CSS看起来像这样:
#tab_one {
position:relative;
left:0px;
top:0px;
}
#tab_two {
position:relative;
left:5000px;
}
#tab_three {
position:relative;
left:5000px;
}
所以基本上我在这里做的只是显示tab_one。 然后,当用户点击tab_two时,它会将tab_two更改为left:0px; 并将tab_one更改为left:5000px; (所以它只是切换了 属性)。问题是因为它的相对低于高度 在它之前的标签。所以如果tab_one的高度是50px那么tab_two的 顶部将是50px。我需要它是0px。如果我将它设置为绝对和它,它的工作原理 然后回到亲戚,但这对我的项目是不可能的 因为它重新加载了我不想发生的标签。任何 帮助弄清楚如何重叠或使其成为0而不是50 非常感谢。
答案 0 :(得分:2)
看起来你有可能让你的位置绝对和位置相对混淆......在CSS positioning上查看这个很棒的教程。
话虽这么说,我把这个例子拼凑在一起让你看(working here)。
CSS
.tabs {
position: relative;
left: 0;
top: 0;
}
.info {
position: absolute;
left: -5000px;
top: 25px;
}
.active {
position: absolute;
top: 25px;
left: 0;
}
HTML
<div class="tabs">
<a href="#tab_one">Tab 1</a>
<a href="#tab_two">Tab 2</a>
<a href="#tab_three">Tab 3</a>
<div>
<div id="tab_one" class="info">
Something here
</div>
<div id="tab_two" class="info">
Something else here
</div>
<div id="tab_three" class="info">
Another thing here
</div>
</div>
脚本
$(document).ready(function(){
// select first tab, get ID
var tmp = $('.tabs a:eq(0)').attr('href');
$(tmp).removeClass('info').addClass('active');
// tab display
$('.tabs a').click(function(){
$('.tabs div > div').removeClass('active').addClass('info');
$( $(this).attr('href') ).addClass('active');
return false;
})
})
编辑:对于“.tabs a”,在我开始时将每个标签作为一个div时,粘贴代码中的CSS遗留下来......它没有做任何事情,所以你可以忽略它LOL。
答案 1 :(得分:0)
您可以使用display
属性隐藏/显示标签,而不是使用偏移。将“tab”类添加到选项卡容器:
<div id="tabs">
<div id="tab_one" class="tab">
Something here
</div>
<div id="tab_two" class="tab">
Something else here
</div>
<div id="tab_three" class="tab">
Another thing here
</div>
</div>
样式表是:
.tab { display: none } /* Don't render by default */
.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */
您所要做的就是将#tabs
元素的类设置为“show_tab_one”,“show_tab_two”或“show_tab_three”之一。当然,如果您有动态数量的动态ID选项卡,则此解决方案将无法为您服务。