jquery tabs question

Question

The problem is every time a tab is activated, the cursor jumps to the top of the page, since the tab link points to a div and the page scrolls up to the top of the div. This creates a jumpy effect if the user has scrolled down a bit, while reading tab content.

Is there anyway to prevent this?

Answer 1

UPDATED to fit posted code!

$j('.null_link').live('click', function(e){
e.preventDefault();
return false;
});

---

$('ul.tabs li a').click(function(e) {
    e.preventDefault();
});

Assuming something like this:

<ul class="tabs">
<li><a href="#" >TAB A</a></li>
<li><a href="#" >TAB B</a></li>
<li><a href="#" >TAB C</a></li>
</ul>

NOTE:

you can also prevent the jump effect by doing this:

<li><a href="javascript:;" >TAB A</a></li>

Answer 2

There is something else wrong, because the ui tabs don't have that behavior by default. Here in an implementation of UI tabs with ui 1.8 and jquery 1.4.2 that has no alterations to its call besides $('#selector').tabs(); http://www.horsezone.com.au/index.php?a=28&b=153

Are you getting any javascript errors when you're running the page? I would suspect something is halting the script, thus "return false" to the A element never happens and the anchor fires.

This is NOT standard jquery-ui tab behavior.

On a side note, as for binding to the click, this would be the 'documented' way:

   $j("#tabs").tabs(
       { fx: { opacity: 'toggle' },
          select: function(e) { e.preventDefault(); return false; }
     });