Question

最近我在stackoverflow上询问了关于多行标签的问题。以下是链接

multi-line tabs

我只是想知道它是否有可能使它们像窗口样式的标签，即如果选择第一行中的标签，我想将其推到第二行。我遇到的问题是我正在创建动态标签。是否可以使用Javascript / jquery来计算每个标签的宽度，并确定第二行标签的起始点？

由于

Answer 1

已更新 已添加标签自动调整大小。

在Chrome / FF

上进行测试

DEMO＆amp;消息来源： http://ask.altervista.org/demo/microsoft-styled-tabs/

    $(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 ...

Answer 2

我不知道Windows是如何做到的，但我认为动态标签不会这样。相反，您可以创建两个列表而不是一个。或者更好的是你可以使用脚本从一个列表中制作两个列表，这样两个列表都可以覆盖整个行宽和＆amp;你不需要硬编码。

微软设计标签

2 个答案: