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%;">
            <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>
                <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>                       

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.

        window.onload = 
        $(function() {
        $( "#tabs" ).tabs();

Your suggestions would be highly appreciated.

2 Answers 2


You may simply do:

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

The required tab will be displayed sans relaoding. :)


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');
  • Thanks for the quick answer. I tried the simple tab structure to solve this problem. <li> <a href="#tabs-Chnges" id="changesId" onClick="tabHighlight1();">Edit Report</a> </li> in function i did function tabHighlight1() { Location.reload(); } It actually helped me but again ** This is reloading the page and then my next tab is coming into the lights in the same page. ** But i am still little concerned about the same page and the page should not be refreshed. I just only want to play with tabs however the page should be fix. Commented Jul 15, 2015 at 12:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .