开发者

jquery tabs question

开发者 https://www.devze.com 2023-01-01 05:01 出处:网络
The problem is every time a t开发者_StackOverflow社区ab 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 cr

The problem is every time a t开发者_StackOverflow社区ab 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?


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>


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; }
     });
0

精彩评论

暂无评论...
验证码 换一张
取 消