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

});

我无法再添加一个选项卡并更改它的大小，CSS 代码中有很多宽度值让我感到困惑。当我试图改变某些东西时，一切都毁了。你能告诉我一些关于这个小提琴的快速提示，关于如何添加更多选项卡以及添加选项卡后我应该更改哪些 css 属性。

4

1 回答 1

2

查看您的代码，有一些无效标记（您有ULs - 列表容器 - 没有LIs - 列表项）。我创建了一个更新的 Fiddle 来更正代码（在某种程度上）并显示一个额外的内容项：

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

您应该可以添加更多，但是您需要更改五个宽度（行号参考 Fiddle 上的 CSS 面板）：

  1. “所有子元素都引用这个宽度”（第 17 行）：这是容器的宽度。
  2. 'width = half size of #moving_tab'（第 47 行）：这是每个选项卡的宽度 - 应该是容器的宽度除以选项卡的数量（在这种情况下：300/3 = 100）
  3. 'width = half size of #moving_tab'（第 64 行）：这应该与上面相同（它是选项卡后面的移动蓝色框
  4. 'width 是 #moving_tab 的宽度乘以 2'（第 87 行）：这是包含内容项的列表的宽度。它应该是容器的宽度乘以选项卡的数量（在这种情况下，300x3 = 900）
  5. 'width is the same with #moving_tab'（第 96 行）：这是每个内容元素的宽度。应该是容器的宽度，减去左右填充（本例中：300 - 10 -10 = 280）

希望这可以帮助...

于 2013-02-27T08:56:29.513 回答