Javascript Microsoft样式的选项卡

最近我问了一个关于多行选项卡的stackoverflow问题。下面是链接

我只是想知道是否有可能使它们像windows样式的选项卡一样，也就是说，如果选择了第一行中的选项卡，我想将其推到第二行。我的问题是我正在创建动态选项卡。是否可以使用Javascript/jquery计算每个选项卡的宽度，并确定第二行选项卡将在哪一点开始

---

谢谢

我不知道windows是如何做到这一点的，但我认为动态标签不可能做到这一点。相反，您可以创建两个列表，而不是一个。或者更好的是，您可以使用脚本从一个列表中创建两个列表，这样两个列表都可以跨越整个行宽度&您不必硬编码任何内容。

更新了添加了选项卡自动调整大小

在

Chrome

/

FF

• 演示和来源：

$（函数（）{
设定线（）；
$（“#windows属性li a”）。单击（函数（e）{
e、 预防默认值（）；
var$li=$（this.parent（）；
$（this.hash）.show（）同级（'.property content'）.hide（）；
var liTp=parseInt（$li.position（）.top）；
if（liTp

如果您乐于使用Javascript，那么我在前面的问题中给出的解决方案就不是很好。也许类似的解决方案更适合您。见：@thirtydot。这个例子很有用。这是一个新的要求。如果所选选项卡位于第一行，我想使用Javascript将所选选项卡的位置移动到第二行。“我希望我在这里提出的问题听起来是明智的。”阿塞蒂克说。在Windows中，MyComputer=>Properties。请不要使用那种糟糕透顶的UI模式。这让人困惑。谢谢。那对我真的很有帮助。

    $(function() {
        setLines();
        $('#windows-properties li a').click(function(e) {
        e.preventDefault();   
        var $li = $(this).parent(); 
            $(this.hash).show().siblings('.property-content').hide();
            var liTp =  parseInt($li.position().top);
            if (liTp < lastLiPos) {
                $('li.line-' + liTp).wrapAll('<div id="move-lis"></div>');
                $('#move-lis').insertAfter('#windows-properties li:last');
                $('li.line-' + liTp).unwrap();
                setLines();
            }
            $li.addClass('selected').siblings('li').removeClass('selected');
        });
        var $lstLi = $('#windows-properties li:last');
        var lastLiPos =  parseInt($lstLi.addClass('selected').position().top);
        $('.property-content:last').show();
    });
//.... other part of code in the demo source ...