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.


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. – Ajay Sharma Jul 15 '15 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.