jqueryui隐藏和滑动功能跳转到顶部答案

【问题标题】：jqueryui hide and slide function jumps to the topjqueryui隐藏和滑动功能跳转到顶部
【发布时间】：2011-07-17 21:08:43
【问题描述】：

嗨，我在为 jquery ui 使用隐藏中的幻灯片时遇到了一些问题。当我按下我创建的 TAB 时，它总是跳到页面顶部。我已经在这个网站上搜索了与我有关的解决方案，但似乎没有找到解决方案，因为我的解决方案与其他网站略有不同。下面是代码

 <ul id="about_navi">
        <li><span class="change_me selected" rel="first">About Us</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="second">Meet The Team</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="third">How We Work</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="fourth">Client Testimonial</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="fifth">Our Products</span><span class="arrow_down"></span></li>
        <div class="clr"></div>
    </ul>

这里是javascript

$(function(){
    $(".change_me").click(function(){
           var class_name = $(this).attr("rel");
           if(($(".context").is(":hidden"))){
                $('.context:visible').hide("slide", { direction: "right" }, 600,function(event){
                    $("."+class_name).show("slide", { direction: "left" }, 600);

                });

                return false;
            }

    })

该代码仅适用于我完全基于的 firefox，直到有人告诉我其他浏览器存在此问题。提前致谢。顺便说一句，我正在使用 jquery 1.4.3 和 jqueryui 1.8.1

【问题讨论】：

你在$("."+class_name)中定义class_name在哪里？
抱歉，我已经编辑了代码。它从跨度中的rel获取属性。

标签： jquery html browser user-interface

【解决方案1】：

你应该试试preventDefault()

$(".change_me").click(function( event ){

    event.preventDefault();

    // Your code...

});

【讨论】：

【解决方案2】：

我已经设法调试了这个问题。它可以通过让内容的 div 或 span 至少具有最小高度来解决。

例如，因为我使用类“上下文”来隐藏 n 显示，我应该早点有另一个 div/span 并将它们的 css 指定为具有最小高度，比如说.....500px。所以无论显示还是隐藏，滚动条都会处于最佳状态，这意味着不会跳跃。

我希望我的解释足够清楚。谢谢。

【讨论】：