Question

嗨我在使用幻灯片里面隐藏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

Answer 1

我设法调试此问题。可以通过使内容的div或跨度至少具有最小高度来解决。

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

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

Answer 2

您应该尝试preventDefault()

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

    event.preventDefault();

    // Your code...

});

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

2 个答案: