css左帮助jquery

Question

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将 极大的赞赏。

Answer 1

它看起来像你，你可能有你的位置的绝对和相对位置的混合起来...看看这个伟大的教程 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...它不会做什么，所以你可以忽略这笑。

Answer 2

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