返回页面时设置活动 Nav Pill

Question

我在下面有一个导航丸示例，其中我有一个导航丸，活动选项卡根据所选选项卡切换，这工作正常。然而 link 将浏览器发送到另一个页面。我想将活性药丸设置为与离开时相同的药丸。我已经设置了 sessionScope.ssSelectedPill = 选择的 link id，这样当我 return 我知道我离开前激活的药丸。

我不确定如何在返回途中设置活性药丸。感谢任何帮助，希望能够使用 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>

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

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

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

返回页面时设置活动 Nav Pill

Set the active Nav Pill when returning to a page

javascript

xpages

twitter-bootstrap-3

nav-pills