Question

I have a masterpage and within the Default page I have included jquery tabs with a button inside the tabs.

Now If I click button it should select tab 2.

So here Is what I have done

<script type="text/javascript">
        $("#<%=Nextbutton.ClientId%>").click(function () {
            $('#tabs').tabs('select', 1);
        });
</script>

Here is my tabs with a button inside it:

<div id="tabs" style="position:relative;margin-left:0px;margin-top:30px;margin-bottom:30px;width:946px; height:432px;">
    <ul>
        <li><a href="#tabs-1">Step 1</a></li>
        <li><a href="#tabs-2">Step 2</a></li>
        <li><a href="#tabs-3">Step 3</a></li>
    </ul>
<div id="tabs-1">
 <asp:Button ID="Nextbutton" class="nexttab" runat="server" Text="Go to Next tab" style="position:absolute;left:332px;top:345px;"/>
</div>
<div id="tabs-2">
//Some Content
</div>
<div id="tabs-3">
//Some Content
</div>

Now my problem is whenever I click the button the page is refreshing and not selecting the tab and the same thing got worked without the master page

Can anyone point out me the right way to do this?

Answer 1

To avoid the post back just return false, or call the event.preventDefault();

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=Nextbutton.ClientId%>").click(function (event) {
            $('#tabs').tabs('select', 1);
            return false;
        });
    });
</script>