返回页面时设置活动的 Nav Pill答案

【问题标题】：Set the active Nav Pill when returning to a page返回页面时设置活动的 Nav Pill
【发布时间】：2015-07-28 15:02:55
【问题描述】：

我在下面有一个导航药丸示例，其中我有一个导航药丸，并且活动选项卡根据所选选项卡切换，这很好用。但是，该链接会将浏览器发送到另一个页面。我想将活性药丸设置为与离开时相同的药丸。我设置了 sessionScope.ssSelectedPill = 选择的链接 ID，这样当我返回时，我就知道在我离开之前处于活动状态的药丸。

我不知道如何在回来的路上设置活性药丸。任何帮助表示赞赏，希望能够使用 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>

【问题讨论】：

标签： javascript twitter-bootstrap-3 xpages nav-pills

【解决方案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>

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

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

这样，在重新加载 XPage 后，最后选择的选项卡处于活动状态。

【讨论】：