0

ここに私が取り組んでいるフィドルがあります: http://jsfiddle.net/V6Vmh/5/

$(document).ready(function () {

    $('.lava').css({left:$('span.item:first').position()['left']});

    $('.item').mouseover(function () {
        $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

        $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
    });

});

もう 1 つタブを追加してサイズを変更することはできませんでした。CSS コードには多くの幅の値があり、混乱しています。何かを変えようとすると、すべてが台無しになります。タブを追加する方法と、タブを追加した後に変更する必要がある css プロパティについて、このフィドルに関する簡単なヒントを教えてください。

4

1 に答える 1

2

コードを調べると、無効なマークアップがいくつかあります ( ULs - リスト コンテナーがあり、LIs - リスト項目はありません)。コードを（ある程度）修正し、追加のコンテンツ項目を表示する更新された Fiddle を作成しました。

http://jsfiddle.net/V6Vmh/6/

さらに追加できるはずですが、変更する必要がある幅が 5 つあります (行番号は Fiddle の CSS パネルを参照します)。

  1. 「すべての子要素がこの幅を参照しています」(17 行目): これはコンテナーの幅です。
  2. 'width = #moving_tab の半分のサイズ' (47 行目): これは各タブの幅です - コンテナの幅をタブの数で割った値にする必要があります (この場合: 300/3 = 100)
  3. 'width = #moving_tab の半分のサイズ' (64 行目): これは上記と同じはずです (タブの後ろにある動く青いボックスです)
  4. 'width is width of #moving_tab x 2' (87 行目): これは、コンテンツ アイテムを保持するリストの幅です。コンテナーの幅にタブの数を掛けた値にする必要があります (この場合、300x3 = 900)。
  5. 'width is the same with #moving_tab' (96 行目): これは各コンテンツ要素の幅です。コンテナーの幅から左右のパディングを引いたもの (この場合: 300 - 10 -10 = 280)

お役に立てれば...

于 2013-02-27T08:56:29.513 に答える