0

我正在设置一个表单，用户将能够在单击按钮时看到他们选择的单选按钮（特定值）。

我能够获得单选按钮焦点并使页面滚动到它，但希望父级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 都在可见框架中

4

2 回答 2

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();
于 2019-06-25T15:36:37.733 回答
1

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

//your stuff goes here
$('html, body').animate({ scrollTop: $('.panel-body').offset().top }, 'fast');
于 2019-06-27T06:50:06.387 回答