首页 文章

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

提问于
浏览 次
0

只有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>
jquery html css

1 回答

  • 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>
    回复于

相关问题