0

问题仅限于 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>
4

1 回答 1

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>
于 2012-06-05T22:48:13.383 回答