0

好的，所以基本上我有这样的设置：

<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 将不胜感激。

4

2 回答 2

2

看起来你可能有你的绝对位置和相对位置混淆了......查看这个关于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;
 })
})

编辑：当我开始将每个选项卡作为 div 开始时，pastebin 代码中的“.tabs a”CSS 被遗留下来......它什么都不做，所以你可以忽略它哈哈。

于 2009-10-23T06:17:05.410 回答
0

display您可以隐藏/显示带有属性的选项卡，而不是使用偏移量。将“选项卡”类添加到选项卡容器：

<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 的选项卡，则此解决方案将不适合您。

于 2009-10-23T04:37:02.817 回答