Set the active Nav Pill when returning to a page

Question

I have a nav pill example below where I have a nav pill and the active tab toggles depending on the selected tab and this works fine. However the link sends the browser to another page. I want to have the active pill set to the same one as when it left. I have set sessionScope.ssSelectedPill = the link id that was selected so that when I return I know the pill that was active before I left.

I'm not sure how to then set the active pill on the way back. Any help appreciated, would like to be able to do it with either SSJS or CSJS not jQuery.

Here is what source looks like:

<xp:panel id="panelPills">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 col-sm-4">
                <ul class="nav nav-pills">

                    <li role="presentation" class="active">

                        <xp:link id="myActions" text="My Actions">
                            <xp:this.attrs>
                                <xp:attr name="data-toggle" value="tab">
                                </xp:attr>
                            </xp:this.attrs>
                            <xp:eventHandler event="onclick"
                                submit="true" refreshMode="partial"
                                refreshId="dynamicContentMainView">
                                <xp:this.action><![CDATA[#{javascript:sessionScope.ssSelectedPill = "myActions"
}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:link>
                    </li>
                    <li role="presentation">
                        <xp:link id="requests" text="Requests">
                            <xp:this.attrs>
                                <xp:attr name="data-toggle" value="tab">
                                </xp:attr>
                            </xp:this.attrs>
                            <xp:eventHandler event="onclick"
                                submit="true" refreshMode="partial"
                                refreshId="dynamicContentMainView">
                                <xp:this.action><![CDATA[#{javascript:sessionScope.ssSelectedPill = "requests";
}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</xp:panel>

Answer 1

Add this "onClientLoad" event handler to your XPage

   <xp:eventHandler
      event="onClientLoad"
      submit="false">
      <xp:this.script><![CDATA[
         var selectedPillId = "#{javascript:getClientId(sessionScope.ssSelectedPill ? sessionScope.ssSelectedPill : 'myActions')}"
         document.getElementById(selectedPillId).parentNode.className = "active"]]></xp:this.script>
   </xp:eventHandler>

and remove class="active" from <li> tag in your XPage.

This code will add class="active" to last selected tab when Xpage is loaded.
If XPage is opened first time (sessionScope.ssSelectedPill is not set) then "myActions" will be set as active.

This way the last selected tab is active after reloading XPage again.