cssはjqueryを助けました

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の高さが50ピクセルの場合、tab_twoの高さは topは50pxです。 0pxにする必要があります。絶対に設定すると機能し、 相対に戻りますが、それは私がいるプロジェクトでは不可能です 私が起こしたくないタブをリロードするので、取り組んでいます。どれか オーバーラップする方法、または50ではなく0にする方法を見つけるのに役立ちます 非常に感謝しています。

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;
 })
})

編集：＆quot; .tabs a＆quot;を除外しますpastebinコードのCSSは、各タブをdivとして始めたときから残っていました...何もしませんので、LOLは無視できます。

Answer 2

オフセットを使用する代わりに、 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 要素のクラスを＆quot; show_tab_one＆quot;、＆quot; show_tab_two＆quot;のいずれかに設定するだけですまたは「show_tab_three」」。もちろん、動的IDを持つ動的タブの数がある場合、この解決策はうまくいきません。