Question

好吧基本上我有这样的设置：

<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 非常感谢。

Answer 1

看起来你有可能让你的位置绝对和位置相对混淆......在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。

Answer 2

您可以使用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选项卡，则此解决方案将无法为您服务。

css离开了帮助jquery

2 个答案: