Question

我添加了一些JQuery选项卡，每次点击其中一个选项卡时，链接的ID都会附加到网址上，然后跳转到网址，这真的很烦人。我已经找了一些修复工具，例如设置超时和停止回发，但似乎没有任何工作，有没有人有任何想法？

<script type="text/javascript">

      $(document).ready(function () {        

          $('.moo').click(function (evt) {
            // stops from submitting the form
            evt.preventDefault();
            return false;
        });


        $("#tabs").tabs();

        setTimeout(function () {
            if (location.hash) {
                window.scrollTo(0, 0);
            }
        }, 1);

    });

</script>




<div id="tabs">
    <ul>
        <li><a href="#tabs-1" class="moo" onclick="return false;" >Nunc tincidunt</a></li>
        <li><a href="#tabs-2" class="moo" onclick="return false;" >Proin dolor</a></li>
    </ul>

    <div id="tabs-1">
        <uc1:PrizeDrawMiniListControl ID="PrizeDrawMiniListControl1" runat="server" />
    </div>

    <div id="tabs-2">
        <uc2:MostViewedControl ID="MostViewedControl1" runat="server" />
    </div>
</div>

编辑：

链接没有回发，只是滚动

Answer 1

http://jsfiddle.net/3au7K/现在工作正常。

将您的javascript功能更改为此

$(document).ready(function () {        

      $('.moo').click(function (evt) {
        // stops from submitting the form
        evt.preventDefault();
        return false;
    });


    $("#tabs").tabs();

    // This will work for dynamically added tabs as well

    $("#tabs ul li").delegate('a', 'click', function(e){
         e.preventDefault();
         return false;
    });
});

这个小黑客会做的伎俩。它没有任何害处，因为JQuery选项卡在初始化后不需要href属性。

Answer 2

从锚标记中删除onclick=return false;并尝试这样：

$('a[href^="tabs-"]').on('click', function(e) {
  e.preventDefault();
});

Answer 3

这将阻止任何锚点从jquery标签跳转:)（将滚动位置移回原始点击）。

$('div.ui-tabs ul li a').click(function(e) {
  e.preventDefault();
  scroll_position = $(window).scrollTop();
  $('html, body').animate({
    scrollTop: scroll_position
  }, 0);
});

Jquery选项卡：如何在单击时停止跳转？

3 个答案: