使用 Jquery 和 Safari 显示/隐藏 div 时屏幕移动。我该如何防止这种情况？

Question

问题仅与 Safari 相关：我有三个选项卡，每个选项卡都显示一个 div id，同时隐藏另外两个。如果我单击 tab2 然后 tab3 然后 tab1 它会显示/隐藏正确的 div 而不会向上滚动屏幕，但是当我从标签 1 中单击 tab2 或 tab3 时，它会将屏幕向上移动到引用 div 的顶部。谁能想到为什么会出现这种情况以及如何解决？我希望在单击选项卡后不向上滚动屏幕的情况下显示/隐藏 div。谢谢！

这是 HTML 代码：

`

<a onClick="remove_visibility('tabs2'), remove_visibility('tabs3'), toggle_visibility('tabs1')">Tab 1</a> 


<a onClick="remove_visibility('tabs1'), remove_visibility('tabs3'), toggle_visibility('tabs2')" class="selected">Tab 2</a> 


<a onClick="remove_visibility('tabs1'), remove_visibility('tabs2'), toggle_visibility('tabs3')">Tab 3</a>

`

这里是相关的 jQuery 代码：

 <script type="text/javascript">
toggle_visibility = function (id) {
    var e = $("#"+id);
    e.show();
}
remove_visibility = function (id) {
    var e = $("#"+id);
    e.hide();
}


</script>

Answer 1

我不会将 onclick 与 JQuery 调用一起使用，我会通过它们的锚 id、类或类型或其他方式附加它们。也可以尝试在显示和隐藏后返回 false 的那些函数中，这可能会成功，因为我认为它试图导航到某个地方，因为你点击了一个空锚。

更新：

我有一些代码可以做到这一点，并且 html 位于页面底部，浏览器的滚动位置位于底部并且不会向上导航：

JQuery（这是一个基于我的 HTML 的快速模型，作为演示，根据您的需要定制它以及您将如何获取项目以及如何获取项目）：

<script type="text/javascript">
    $(document).ready(function() {
        $(".divClass a").each(function(i) {
            if ($(this).text() != 'Tab 2') {
                $(this).next().hide();
            }
            $(this).click(function() {
                $(".divClass a").each(function(i) {
                    $(this).next().hide();
                });
                $(this).next().show();
                return false;
            });
        });
    });
</script>

HTML（再次快速将一些东西放在一起进行演示）：

<div class="divClass">
    <a href="JavaScript:void();">Tab 1</a>
        <div id="Tab1">
            I am Tab 1 
        </div>
    <a href="JavaScript:void();">Tab 2</a>
        <div id="Tab2">
            I am Tab 2 
        </div>
    <a href="JavaScript:void();">Tab 3</a>
    <div id="Tab3">
            I am Tab 3 
        </div>
</div>