Question

问题仅适用于Safari：我有三个选项卡，每个选项卡都显示div ID，同时隐藏其他两个选项卡。如果我单击tab2然后tab3然后tab1它显示/隐藏正确的div而没有屏幕向上滚动，但是当我然后单击tab2或tab3从选项卡1时它将屏幕移动到引用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，类或类型或其他方式附加它们。尝试在那些功能中，在你显示和隐藏之后返回一个假的可能就是这样做，因为我认为它试图导航到某些地方，因为你点击了一个空锚。

更新

我有一些代码可以执行此操作，而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>

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

1 个答案: