Question

我对非活动标签的元素位置有疑问。

HTML：

    <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
                <li><a href="#tabs-3">Aenean lacinia</a></li>
            </ul>
            <div id="tabs-1">
                <p id="t1">text 1</p>
            </div>
            <div id="tabs-2">
                <p id="t2">text 3</p>
            </div>
            <div id="tabs-3">
                <p id="t3">text 3</p>
            </div>
        </div>
<input type="button" value="getPosition"  onclick="getP();"/>

JS：

$(document).ready(function() {
    $("#tabs").tabs({active: 0});

    // set position
    $('#t1').css('position', 'absolute');
    $('#t2').css('position', 'absolute');
    $('#t3').css('position', 'absolute');

    // set top
    $('#t1').css('top', '50px');
    $('#t2').css('top', '70px');
    $('#t3').css('top', '90px');

    // set left
    $('#t1').css('left', '100px');
    $('#t2').css('left', '200px');
    $('#t3').css('left', '300px');

});

function getP() {
    var pos1 = $('#t1').position();
    var pos2 = $('#t2').position();
    var pos3 = $('#t3').position();

    alert('t1: top='+pos1.top+' left='+pos1.left+' t2: top='+pos2.top+' left='+pos2.left+' t3: top='+pos3.top+' left='+pos3.left);
}

住： http://jsfiddle.net/xnmHj/

据我所知，因为jq ui有效，但我需要获得正确的参数并且厌倦了找到解决方案，或者可能只是我是盲目的。我会很高兴任何信息。非常感谢。

Answer 1

非活动标签设置为display:none。

您可以获取visibility:hidden元素的坐标，但display:none元素将从渲染树中排除。所以他们的立场是不明确的。

如果有帮助，您可以获取css样式内联数据。

或者，您可以将元素设置为可见，获取其位置然后再次隐藏它，但可能会导致渲染问题。

演示：http://jsfiddle.net/IrvinDominin/xnmHj/1/

jquery ui选项卡非活动选项卡的错误位置值

1 个答案: