题
ok所以基本上我有一个建立这样的:
<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到左:0px;和变化tab_one到左:5000px;(所以这只是开的 财产)。问题是因为其相对的,它是打算下的高度 的项卡之前。因此,如果tab_one的身高是50像素然后tab_two的 顶部将50像素.我需要它是0px.它的工作如果我把它设置于绝对的, 然后回到相对的但那是不可能的项目,我是 工作上,因为它将重新加载标签,我不希望发生的。任何 有助于找出如何重叠或使它0,而不是50将 极大的赞赏。
解决方案
它看起来像你,你可能有你的位置的绝对和相对位置的混合起来...看看这个伟大的教程 CSS定位.
这就是说,我一起扔了这个例子你来看(在这里工作).
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;
})
})
编辑:哎呀"。签了一个"CSS在引擎收录码是留下来的,当我开始了与各个标签,作为一个div...它不会做什么,所以你可以忽略这笑。
其他提示
您可以使用 display
属性隐藏/显示标签,而不是使用偏移。添加“标签” class选项卡容器:
<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选项卡,则此解决方案将不适合您。
不隶属于 StackOverflow