1

我对非活动选项卡的元素位置有疑问。

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 有效，但我需要获得正确的参数并且厌倦了寻找解决方案，或者我可能只是盲目的。我会很高兴任何信息。非常感谢。

4

1 回答 1

0

非活动选项卡设置为display:none。

您可以获取元素的坐标visibility:hidden，但display:none元素会从渲染树中排除。所以他们的位置是不确定的。

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

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

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

于 2013-09-05T18:02:08.837 回答