jquery - 自动滚动到 Div 覆盖

Question

如果每个链接都是当前页面上的一个 div，我有一个链接列表 href，这样我可以在使用某些 javascript 单击时更改 div 显示设置。当前烦人的问题是当您单击链接时它会滚动到 div 位置。我不希望它滚动到我只需要显示它的 div。

列表中的链接

<li><a href="#victimcenterdiv" class="side-a-li">THE CRIME
                        VICTIMS CENTER</a></li>
                <li><a href="#victimrightsdiv" class="side-a-li">CRIME
                        VICTIM LEGAL RIGHTS</a></li>

div 和 css

<div id="victimcenterdiv" class="ui-div-interface ui-show">
            <span>12345</span>
        </div>


.ui-div-interface {
    background: none;
    top: 10%;
    position: absolute;
    left: 9%;
    width: 100%;
    height: 100%;
    display: none;
}

.ui-show {
    display: block !important;
}

最后是 javascript/jquery 负责:

<script>
    $(document).ready(function() {
        $('a').not($('#search-reg-options')).click(function() {
            $('.ui-show').removeClass('ui-show')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('ui-show');
        });

        $('#search-reg-options').click(function() {
            $('.options-shown').removeClass('options-shown')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('options-shown');
        });
    });
</script>

问题 当有人点击我列表中的链接时，如何停止自动滚动？

Answer 1

您的 View 自动滚动的原因是因为您的 a 锚定到 div 的 id 为 victimcenterdiv，因为你有属性 href="#victimcenterdiv"。

您可以简单地将属性更改为href="#"。或者，您可以在 HTML5 中完全删除 href 属性。

但是，您的 jquery 代码目前依赖于 href。因此，这意味着您必须添加一个不同的属性来帮助您的代码区分要使哪个 div 可见。一种方法是使用 data-* attributes.这允许您将具有自定义值的自定义属性嵌入到您的 a 标记中。

<a data-display="#victimcenterdiv" class="side-a-li">

要获取 jquery 中 data 属性的值，请使用 data()方法。

var mydiv = $(this).data('display');
$(mydiv).addClass('ui-show');