为选定的树节点设置 styleClass

Question

我有时会偶然发现以下问题，这可能很容易解决。但也许我就是不明白。

在 XPage treeNode 中，例如在xe:navigator 的xe:applicationLayout 中使用（pageTreeNode、placeBarActions 等）我想知道如何影响 styleClass 属性，以便我可以影响“选定的颜色”。

<xe:this.titleBarTabs>
    <xe:pageTreeNode label="Label Acc1"
        selection="/Admin/Acc1/.*" page="/xpAdminAcc1.xsp"
        styleClass="bg-info">
    </xe:pageTreeNode>
    <!--- ... -->
</xe:this.titleBarTabs>

在本例中，styleClass 'bg-info' 将始终分配给 titleBarTab。那是标签的背景。对于选定的选项卡，“活动”类会自动分配：class"bg-info active"。

有没有办法定义，例如用于活动的 bg-primary 类？

我正在使用 bootstrap3 主题。这是 HTML 生成的代码。如您所见，唯一的区别是激活的菜单项的类包含类“active”：

<div class="col-sm-12 col-md-12 applayout-titlebar-tabsarea" role="navigation">
<ul id="view:_id1:_id2:appLayout_tb" class="nav nav-tabs applayout-titlebar-tabs" role="tablist">
    <li class="menu-item active">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc1.xsp" class="bg-info active">Label Acc1</a>
    </li>
    <li class="menu-item">
        <a role="tab">Label Acc2</a>
    </li>
    <li class="menu-item">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc2.xsp" class="bg-info">Label Acc2</a>
    </li>
<!-- -->

Answer 1

如果您将样式表添加到应用程序并指定要为该类应用的样式，那么由于这是在应用程序级别而不是服务器级别，因此 CSS 的标准规则（级联样式表，因此样式级联向下和得到扩展/覆盖）将适用，应用程序级别将优先。只需记住将应用程序样式表作为资源添加到您的主题资源/布局自定义控件/XPage 上。 XPage 是最不受欢迎的，因为它需要在多个地方添加。

最简单的方法是使用 Firebug 或其他检查工具，选择元素，找到设置当前主题的 CSS，将其复制并粘贴到应用程序的样式表中并相应地覆盖设置。

这是一个元素略有不同的示例：

我的 CSS 是：

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
background-color:red;

}