jquery - 使用 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 调用一起使用，我会通过 anchor ID、类或类型或其他方式附加它们。在显示和隐藏后返回 false 的那些函数中也尝试一下，这可能会起到作用，因为我认为它试图导航到某个地方，因为你单击了一个空 anchor 。

更新:

我有一些代码可以做到这一点，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>