导航药丸在面板标题中未按预期工作答案

【问题标题】：Nav-pills not working as expected in a panel-heading导航药丸在面板标题中未按预期工作
【发布时间】：2015-07-27 16:15:29
【问题描述】：

我在面板标题中添加了一个 nav-pill，但它没有按预期工作。 onclick 事件正确触发并正确切换显示的面板，但未突出显示选定的选项卡。如果我将容器流体移出面板标题，它会在单击时选择选项卡。我喜欢使用引导面板和面板标题获得的效果，但如果可以在单击时选择选项卡，那就太好了。

有什么想法吗？？？

<xp:panel id="panelMain">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-10 col-sm-4">
                            <ul class="nav nav-pills">
                                <li role="presentation">
                                    <xp:link id="header" text="Header">
                                        <xp:this.attrs>
                                            <xp:attr name="data-toggle" value="tab">
                                            </xp:attr>
                                        </xp:this.attrs>
                                        <xp:eventHandler event="onclick" submit="true"
                                            refreshMode="partial" refreshId="panelMain">
                                            <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "Header"}]]></xp:this.action>
                                        </xp:eventHandler>
                                    </xp:link>
                                </li><!-- li role= -->
                                <li role="presentation">
                                    <xp:link id="history" text="History">
                                        <xp:this.attrs>
                                            <xp:attr name="data-toggle" value="tab">
                                            </xp:attr>
                                        </xp:this.attrs>
                                        <xp:eventHandler event="onclick" submit="true"
                                            refreshMode="partial" refreshId="panelMain">
                                            <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "History"}]]></xp:this.action>
                                        </xp:eventHandler>
                                    </xp:link>
                                </li><!-- li role= -->
                            </ul><!-- class nav -->
                        </div><!-- col -->
                    </div><!-- main row -->
                </div><!-- container-fluid -->
        </div><!-- panel-heading -->
        <div class="panel-body">
            <xp:panel id="panelHeader">
            Header Panel
                <xp:this.style><![CDATA[#{javascript:if (!viewScope.containsKey("vsShowPanel")){
    viewScope.vsShowPanel = "Header";
}
var showPanel:String = viewScope.vsShowPanel;
(showPanel == "Header" ) ? "" : "display:none"}]]></xp:this.style>
            </xp:panel> <!-- panelHeader -->
            <xp:panel id="panelHistory">
                History panel
                <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "History") ? "" : "display:none"}]]></xp:this.style>
            </xp:panel><!-- panelHistory -->
        </div><!-- panel-body -->
    </div><!-- class=panel -->
</xp:panel><!-- panelMain -->

【问题讨论】：

标签： twitter-bootstrap-3 tabs xpages panel

【解决方案1】：

如果您刷新包含导航的面板/div，则药丸上的高亮显示将丢失。在下面的代码中，我将导航从面板标题中移出，高级精简版按预期工作。不完全是我想要的，但它有效。我需要记住“不要刷新导航”

<xp:panel id="panelNav">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 col-sm-4">
                <ul class="nav nav-pills">
                    <li role="presentation">
                        <xp:link id="header" text="Header">
                            <xp:this.attrs>
                                <xp:attr name="data-toggle" value="tab">
                                </xp:attr>
                            </xp:this.attrs>
                            <xp:eventHandler event="onclick" submit="true"
                                refreshMode="partial" refreshId="panelMain">
                                <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "Header"}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:link>
                    </li><!-- li role= -->
                    <li role="presentation">
                        <xp:link id="history" text="History">
                            <xp:this.attrs>
                                <xp:attr name="data-toggle" value="tab">
                                </xp:attr>
                            </xp:this.attrs>
                            <xp:eventHandler event="onclick" submit="true"
                                refreshMode="partial" refreshId="panelMain">
                                <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "History"}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:link>
                    </li><!-- li role= -->
                </ul><!-- class nav -->
            </div><!-- col -->
        </div><!-- main row -->
    </div><!-- container-fluid -->
</xp:panel>
<xp:panel id="panelMain">
    <div class="panel panel-default">

        <div class="panel-body">
            <xp:panel id="panelHeader">
                Header Panel
                <xp:this.style><![CDATA[#{javascript:if (!viewScope.containsKey("vsShowPanel")){
    viewScope.vsShowPanel = "Header";
}
var showPanel:String = viewScope.vsShowPanel;
(showPanel == "Header" ) ? "" : "display:none"}]]></xp:this.style>
            </xp:panel> <!-- panelHeader -->
            <xp:panel id="panelHistory">
                History panel
                <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "History") ? "" : "display:none"}]]></xp:this.style>
            </xp:panel><!-- panelHistory -->
        </div><!-- panel-body -->
    </div><!-- class=panel -->
</xp:panel><!-- panelMain -->

【讨论】：