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にする必要があります。絶対値に設定してから相対値に戻すと機能しますが、作業中のプロジェクトでは、発生させたくないタブが再読み込みされるため、これは不可能です。オーバーラップする方法や、50ではなく0にする方法を理解するのに役立つ情報をいただければ幸いです。

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として使い始めたときから、ペーストビンコードの「.tabs a」CSSが残っていました...何もしないので、LOLを無視できます。

于 2009-10-23T06:17:05.410 に答える
0

オフセットを使用する代わりに、プロパティを使用してタブを表示/非表示にすることができ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を持つ動的な数のタブがある場合、このソリューションは機能しません。

于 2009-10-23T04:37:02.817 に答える