CODEWITHSUNDEEP
jquery
Ramesh
Ramesh

Reputation: 11

page is scrolling down when i use next tab button in tab menu

<script type='text/javascript'>

    $(window).load(function(){
        $("#tabs").tabs();
        $(".nexttab").click(function() {
            $("#tabs").tabs("select", this.hash);
        });
    });

</script>


<tr>
    <td>&nbsp;</td>
    <td align="right">  <a class="nexttab" href="#tabs-1">  << Back  </a> &nbsp;&nbsp; <a class="nexttab" href="#tabs-3">Next >> </a> </td>
</tr>

When i use above code it is perfectly moving to next tab and previous tab. but problem is when i go to next or previous tab, my screen is going down ( i mean page is scrolling down little but). could you Please help me out.. Thanks in advance.

Regards Ramesh

Upvotes: 1

Views: 357

Answers (2)

DanielB
DanielB

Reputation: 20230

You have to add a return false in your click handler, so it do not jump to the defined hash.

$(".nexttab").click(function() {
  $("#tabs").tabs("select", this.hash);
  return false;
});

Also using << Back or Next >> is not valid. Use &lt;&lt; Back instead or even Next &gt;&gt;

Upvotes: 0

aorcsik
aorcsik

Reputation: 15552

The #tabs-1 and #tabs-3 in your anchor tags is making the browser to jump to these anchor points. To prevent this, add return false; to the end of your click handler, to prevent the default browser action.

Upvotes: 1

Related Questions