Jquery 鼠标上方的选项卡式滑块

这是我正在使用的小提琴：

---

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

查看代码时，有一些无效标记（您有

UL

s-list容器-没有

LI

s-list项）。我已经创建了一个更新的小提琴，它在一定程度上纠正了代码，并显示了一个额外的内容项：

您应该可以添加更多，但有五种宽度需要更改（行号参考小提琴上的CSS面板）：

“所有子元素都引用此宽度”（第17行）：这是容器的宽度

“宽度=移动选项卡的一半大小”（第47行）：这是每个选项卡的宽度-应该是容器的宽度除以选项卡的数量（在这种情况下：300/3=100）

“宽度=移动选项卡的一半大小”（第64行）：这应该与上面相同（它是选项卡后面移动的蓝色框）

“width是#moving_tab的宽度乘以2”（第87行）：这是保存内容项的列表的宽度。它应该是容器的宽度乘以选项卡的数量（在本例中，300x3=900）

“宽度与#moving_tab相同”（第96行）：这是每个内容元素的宽度。应该是容器的宽度，减去左侧和右侧的衬垫（在本例中：300-10-10=280）

---

希望这有帮助……

好的，对不起，我对这件事太陌生了：）

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

});