Question

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

任何想法???

/index.html

Answer 1

如果刷新包含Nav的面板/ div，那么药丸上的highlite就会丢失。在下面的代码中，我将导航板移出面板标题，高精简版按预期工作。不是我想要的但是它有效。我需要记住“不要在Nav上刷新”

<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 -->

导航丸在面板标题中没有按预期工作

1 个答案: