Question

我正在设置一个表单，用户可以在其中单击按钮时看到他们对单选按钮（具有特定值）的选择。

我能够获得单选按钮的焦点并使页面滚动到它，但是希望父panel-body像scrollintoview()一样聚焦在页面上，但是不起作用。

还在.parents(".panel-body")之前也使用了.focus()也不起作用。 ``

<div class="panel-body">
    <div class="input-opt">
        <p>Select options..</p>
        <div rel="tool-tip">
            <div class="radio">
                <label class="lead">
                    <input id="rad1" tabindex="1" required="required" value="one" type="radio">
                    one
                </label>
            </div>
            <div class="radio">
                <label class="lead">
                    <input id="rad2" tabindex="1" required="required" value="two" type="radio">
                    two
                </label>
            </div>

            <div class="radio">
                <label class="lead">
                    <input id="rad3" tabindex="1" required="required" value="three" type="radio">
                    three
                </label>
            </div>
        </div>
    </div>
</div>


button.addEventListener("click", function () {
    var ncyc = $("input[value='two']:checked").length;
    $("input[value*='two']:checked:eq(" + target + ")").focus().keyup();

    target = target + 1;
    if (target == ncyc) {
        target = 0;
    }
});

上面的代码仅使单选按钮成为焦点...当不使用.parents（“。panel-body”）...我希望整个div位于可见帧中

Answer 1

如果父级为<div>，则需要tabindex属性。尝试这样

$("input[value*='three']:checked:eq(" + target + ")")
.parent(".panel-body").attr("tabindex",-1).focus();

或将tabindex属性添加到html标签之类

<div class="panel-body" tabindex="-1">
</div>

并像旧表达式一样在您的代码中使用：

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").focus();

更新： *如果您不想更改html，则可以通过jquery代码执行以下操作

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").attr('tabindex','-1').focus();

Answer 2

如果您无法更改html文件，则可以使用以下方法滚动到div：

//your stuff goes here
$('html, body').animate({ scrollTop: $('.panel-body').offset().top }, 'fast');

使用jQuery获取焦点（或滚动到视图）到面板

2 个答案: