使用 jquery 获得焦点（或滚动到视图中）到面板答案

【问题标题】：Get focus(or scroll into view) to a panel using jquery使用 jquery 获得焦点（或滚动到视图中）到面板
【发布时间】：2019-11-07 11:30:25
【问题描述】：

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

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

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

<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 都在可见框架中

【问题讨论】：

请提供完整的html和js代码示例
更新@dganenco
抱歉，我不明白您的代码中的target 是什么？

标签： javascript jquery panel js-scrollintoview

【解决方案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();

【讨论】：

嗨...这是我正在处理的用户脚本......问题是我不想更改 html ......任何可能的方式而不更改文件跨度>
当然，您可以通过 jquery 进行更改，而不是更改 HTML，如下代码：$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").attr('tabindex','-1').focus();

【解决方案2】：

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

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

【讨论】：