2

I have added some JQuery tabs, every time I click on one of them the ID of the link is appended to the url and it jumps to the url, which is really annoying. I have looked for a few fixes like set time out and stopping the postback but nothing seems to work, does anyone have any ideas?

<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>

EDIT:

The link is not posting back, it's just scrolling

Funky
  • 12,890
  • 35
  • 106
  • 161
  • I usually resolve this issue using href="javascript:void(0)". You may try it with onClick. Not sure this will resolve this issue. – Nick Sep 17 '12 at 09:04
  • [Works for me](http://jsfiddle.net/nV23h/1/) without any hacks. If you have a JavaScript error _elsewhere_ which prevents the tab widget from firing, you might run into the above mentioned problem. – Salman A Sep 17 '12 at 10:06

3 Answers3

6

http://jsfiddle.net/3au7K/ its working fine now.

Change your javascript function to this

$(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;
    });
});

This little hack will do the trick. There is no harm in it because JQuery tabs don't need href attribute after getting initialized.

Zahid Riaz
  • 2,879
  • 3
  • 27
  • 38
  • I tried that and got this error: Uncaught jQuery UI Tabs: Mismatching fragment identifier. jquery-ui-1.8.16.custom.min.js:461 d.widget._tabify jquery-ui-1.8.16.custom.min.js:461 d.event.handle jquery-1.5.1.min.js:16 d.event.add.k.handle.m – Funky Sep 17 '12 at 09:22
  • Also I've provided jsfiddle link. Check that one also – Zahid Riaz Sep 17 '12 at 09:59
  • doesn't seem to work for tabs dynamically added to the DOM after document ready. – dewd Apr 25 '14 at 14:57
  • I've edited my answer. the click event binding code is changed. This will work for dynamically added tabs as well. – Zahid Riaz Apr 28 '14 at 06:00
  • What am I missing? If you delete almost all your js and leave only `$(document).ready(function () { $("#tabs").tabs(); });` it behaves the same... huh? – Julix Aug 02 '17 at 17:35
1

Remove onclick=return false; from anchor tag and try like this:

$('a[href^="tabs-"]').on('click', function(e) {
  e.preventDefault();
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
0

This will prevent any anchor jumping from jquery tabs :) (moves scroll position back to original click).

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