Question

这是我正在使用的小提琴： 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属性。

Answer 1

查看代码，有一些无效的标记（你有UL s - 列表容器 - 没有LI s - 列表项。我创建了一个更新的小提琴，它可以纠正代码（在某种程度上）并显示一个额外的内容项：

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

你应该能够添加更多，但你需要更改五个宽度（行号指的是小提琴上的CSS面板）：

'所有子元素都引用此宽度'（第17行）：这是容器的宽度。
'width = #moving_tab的一半大小'（第47行）：这是每个标签的宽度 - 应该是容器的宽度除以标签数量（在这种情况下：300/3 = 100）
'width = #moving_tab'的一半大小（第64行）：这应该与上面相同（它是标签后面的移动蓝框）
'width是#moving_tab的宽度乘以2'（第87行）：这是包含内容项的列表的宽度。它应该是容器的宽度乘以选项卡的数量（在这种情况下，300x3 = 900）
'宽度与#moving_tab'相同（第96行）：这是每个内容元素的宽度。应该是容器的宽度减去左右倾斜（在这种情况下：300 - 10 -10 = 280）

希望这会有所帮助......

鼠标悬停上的标签滑块

1 个答案: