Jquery Tabs reset the tabs after clicking a button inside Tab

Question

When I click on the button inside a tab, the tab is loading and it returns to the first Tab.. this picture will make things clear:

For example If I clicked on REDSEA the tab selected ASIA will change and returns to the first one AFRICA, what I need is when I Click on button REDSEA stay inside the tab ASIA selected!

This is the code that Im using:

<script>
      $(function () {
          $("#tabs").tabs();
      });
  </script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">AFRICA</a></li>
    <li><a href="#tabs-2">EUROPE</a></li>
    <li><a href="#tabs-3">AMERICA</a></li>
    <li><a href="#tabs-4">ASIA</a></li>
    <li><a href="#tabs-5">OTHER TRADE</a></li>
  </ul>
  <div id="tabs-1">

    <asp:Button id="tr" OnClick="trd_clk1" runat="server" text='<%# Bind("trade") %>' UseSubmitBehavior="False" CommandName="tr" Width="105px" Height="22"  CommandArgument='<%# Bind("trade") %>' CssClass="btn" />&nbsp;&nbsp;&nbsp;

     </div>
  'The same thing for other tabs
</div>

Answer 1

Try this to set hash changes on URL when tab change and maintain hash on postback

 <script>
         $(function () {
            $( "#tabs" ).tabs();
            // set hash on  tab change
            $('#tabs ul li a').click(function () {
                location.hash = $(this).attr('href');
            });

            //maintain hash on post back
            $('#<%=Page.Form.ClientID%>').attr('onsubmit', 'this.action += top.location.hash');
          })
    </script>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">AFRICA</a></li>
            <li><a href="#tabs-2">EUROPE</a></li>
            <li><a href="#tabs-3">AMERICA</a></li>
         </ul>
        <div id="tabs-1">
            tab 1
        </div>
        <div id="tabs-2">
            tab 2
            <asp:Button ID="Button2" runat="server" Text='click'  />
        </div>

        <div id="tabs-3">
            tab 3
            <asp:Button ID="Button3"  runat="server" Text='click'  />
        </div>
    </div>

You only need to change JavaScript code

Answer 2

I have another solution, implemented and tested with chrome, IE and safari.

I am using the "localStorage" object and it suppose to work all the browsers which support localStorage.

On the click event of tab, I am storing the currentTab value to local storage.

This will work for as the content page does not append the url with hash.

$(document).ready(function() {
        jQuery('.ctabs .ctab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
            localStorage["currentTab"] = currentAttrValue;

            // Show/Hide Tabs
            jQuery('.ctabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
        if (localStorage["currentTab"]) {
            // Show/Hide Tabs
            jQuery('.ctabs ' + localStorage["currentTab"]).show().siblings().hide();
            // Change/remove current tab to active
            jQuery('.ctabs .ctab-links a[href$="' + localStorage["currentTab"] + '"]').parent('li').addClass('active').siblings().removeClass('active');
        }
    });