0

编辑：我发现它为什么这样做，但现在出现了一个问题。向下滚动到我在底部说“编辑”的地方，以帮助我解决出现的新问题。

该页面可以在这里看到：http ://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php

如果您向下滚动到底部并单击“视频”部分下方的选项卡之一，它会跳到页面上。仅当您向下滚动以使视频位于浏览器底部上方时才会发生这种情况。

这是我为标签提供的页面代码：

        <ul id="tabs" class="filter-nav option-set">
          <li><a class="selected" href="#">Acetone Test</a></li>
          <li><a href="#">Impact Test</a></li>
          <li><a href="#">Heat Test</a></li>
        </ul>
        <div id="tab-items" class="margin_top_55 textcenter">
          <hr class="dashed margin_bottom_15">
          <section>
            <div>
              <p>
                <video id="sublime" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.jpg" width="640" height="320" data-name="Swanstone - Chemical (Acetone) Test" data-uid="56410b5b" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.mov" />
                </video>
              </p>
              <h3>Acetone Test</h3>
              <h5 class="grey">Impervious To Chemicals</h5>
            </div>
          </section>
          <section>
            <div>
              <p>
                <video id="sublime2" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.jpg" width="640" height="320" data-name="Swanstone - Impact Test" data-uid="12be3c75" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.mov" />
                </video>
              </p>
              <h3>Impact Test</h3>
              <h5 class="grey">Impact Resistant!</h5>
            </div>
          </section>
          <section>
            <div>
              <p>
                <video id="sublime3" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.jpg" width="640" height="320" data-name="Swanstone - Heat Test" data-uid="403140c8" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.mov" />
                </video>
              </p>
              <h3>Heat Test</h3>
              <h5 class="grey">Withstands Heat!</h5>
            </div>
          </section>

这是我拥有的JS代码

$(function() { 
    $("#tabs").tabs("#tab-items section", { effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 }); 
    $(".option-set").on("click", "a", function(e) { 
    $(this).addClass('selected') .parent().siblings().find("a").removeClass('selected'); }); 
});

它调用 jquery.tools.min.js，它只是 jqueryUI 的“选项卡”。该文件可以在这里看到：http ://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js

编辑：我自己解决了问题，但现在有一个问题以获得最佳方法

似乎是 div 立即隐藏而另一个淡入的问题，所以这里的代码如下：

{ effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });

所以问题是，即使看不到，这两个部分都像 .0000 MS 一样不可见，但它被迫向上推页面，那里什么都没有（如果你知道我的意思）。

所以我可以通过将“fadeOutSpeed”从 0 更改为 1 来解决这个问题，它不再这样做，虽然它看起来有点傻。有没有更好的效果可以阻止这种情况的发生？看起来好像有一个淡入淡出会解决这个问题。

谢谢你们的帮助！:)

4

3 回答 3

1

这是您自己在 custom.js 中的代码：

$('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
Uncaught TypeError: Cannot read property 'top' of null (repeated 4 times)
        }, 850,'easeInOutExpo');
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });

按钮是 $('.smoothscroll a')，所以你的 scrollTop 让它滚动到顶部！

于 2012-08-12T23:02:04.823 回答
0

也许这个scrollfix可以修复它？

$(".option-set").on("click", "a", function(e) {
    var scrollTop = $(window).scrollTop();
    $(this).addClass('selected').parent().siblings().find("a").removeClass('selected');
    $(window).scrollTop(scrollTop);
});
于 2012-08-12T23:01:58.500 回答
0

我建议你只使用 div 或 span 而不是标签。然后只需使用 css 将其设置为看起来像一个链接。

例子：

myclass {
    cursor: pointer;
}
于 2012-08-12T23:10:02.480 回答