javascript - 返回页面时设置事件的 Nav Pill

Question

下面有一个导航药丸示例，其中有一个导航药丸，并且事件选项卡根据所选选项卡进行切换，效果很好。然而，该链接会将浏览器发送到另一个页面。我希望将有效药丸设置为与离开时相同的药丸。我已经设置了 sessionScope.ssSelectedPill = 所选的链接 ID，这样当我返回时我就知道在我离开之前处于事件状态的药丸。

我不知道如何在回来的路上设置 active 药丸。感谢任何帮助，希望能够使用 SSJS 或 CSJS 而不是 jQuery 来完成此操作。

这是源代码:

<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

将此“onClientLoad”事件处理程序添加到您的 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>

并删除class="active"来自<li> XPage 中的标记。

此代码将添加 class="active"加载 Xpage 时到最后选择的选项卡。
如果第一次打开 XPage(未设置 sessionScope.ssSelectedPill)，则“myActions”将设置为事件状态。

这样，再次重新加载 XPage 后，最后选择的选项卡就会处于事件状态。