Active a tab when a button clicked without reloading the page

Question

I am working on a salesforce community. I have 8 different Tabs but instead of dividing them into different pages i wrote the entire code in singe page.

<div id="tabs">
    <div class="container-fluid">
    <div class="container" style="width:98%;">
        <ul>           
            <li><a href="#tabs-Home" id="ChgPass" onClick="tabHighlight8();">View Full Report</a></li>
            <li><a href="#tabs-Chnges" id="changesId"  onClick="tabHighlight1();">Summary of Changes</a></li>
            <li><a href="#tabs-Goal" id="tabGoalId" onClick="tabHighlight9();">Goals</a></li>   
            <li><a href="#tabs-ClientInfo" id="IdClientInfo" onClick="tabHighlight7()">Client Information</a></li>          
            <li><a href="#tabs-TransInter" id="tabTranInterID" onClick="tabHighlight2();">Translation/Interpretation Data</a></li>
            <li><a href="#tabs-Staftran" id="tabStaftran" onClick="tabHighlight3();">Staffing/Training</a></li>
            <li><a href="#tabs-Protocols" id="tabProtocolsId" onClick="tabHighlight4();">Protocols</a></li>
            <!--June18
                <li><a href="#tabs-Quality">Quality</a></li>
            -->
            <li><a href="#tabs-Budget" id="IdBudget" onClick="tabHighlight5();">Budget</a></li>
            <li><a href="#tabs-InPersonServ" id="IdReviewChange" onClick="tabHighlight6();">Review and Submit</a></li>

            <li id="IdLogout"><!--<a href="#tabs-Logout" id="IdLogout"> --> <apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}" >                 
                    <!--<apex:image url="{!URLFOR($Resource.CommunityZip,'images/logout_nav.png')}"/>--> Logout
            </apex:outputLink><!-- </a> --> </li>                       
        </ul>
   </div>  

Now i have one Edit Report On the first Tab "View Full Report". I am trying to write a javascript function that when i click On Edit Report i want the Summary Of Changes tab to be active in the same page without reloading the page. The function which i am using on load for all tabs is given bellow.

<script>
        window.onload = 
        $(function() {
        $( "#tabs" ).tabs();
        });
    </script>

Your suggestions would be highly appreciated.

Answer 1

You may simply do:

$( "#tabs-Chnges" ).tabs({ active: 1});

The required tab will be displayed sans relaoding. :)

Answer 2

My suggestion is :

You'll have to use localStorage or cookies to manage that. Here's a quick and dirty solution that can be vastly improved, but may give you a starting point:

   $(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});