2

我是一个完整的 RSS/CSS 菜鸟，我在让这段代码工作时遇到了一些麻烦。基本上我想要做的是以下内容：使用来自 Librocket 的 tabset 元素（用于选项屏幕）有一个导航栏。我无法维持活动/按下状态（向用户显示哪个选项卡处于活动状态）。我试过使用“:focus”，但是一旦我点击其他地方，焦点就会丢失。如果我使用 ":active"，只有当我在对象上按住鼠标按钮时才会保持活动状态。

无论如何，这是RSS代码：

/* Force the tabset element to a fixed size. */
tabset
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
}

/* Display the tab container as a block element 20 pixels high; it will
   be positioned at the top of the tabset. */
tabset tabs
{
    display: block;
    height: 20px;
}

/* Force each tab to only take up 80 pixels across the tabs element. */
tabset tab
{
    width: 80px;
    border: solid;
    border-width: 1px 1px 0 1px;
}

/* DOESN'T WORK
tabset tab:focus    
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}*/

/* DOESN'T WORK
tabset tab:active
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}
*/
/* Display the panel container as a block element 180 pixels high; it will
   be positioned below the tab container and take up the rest of the space
   in the tabset. */
tabset panels
{
    display: block;
    height: 100%;
    border: solid;
}

/* Fix each panel to take up exactly the panelled space. */
tabset panels panel
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
    border-width: 1px 1px 0 1px;
}

以及 RML (HTML-ish) 代码的摘录：

<game id="game">
    <tabset style="height: 100%;">
        <tab>Gameplay</tab>
        <panel>
            GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB <br />
        </panel>
        <tab>Video</tab>
        <panel>
            VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB <br />
        </panel>
    </tabset>

我不能使用任何 javascript 代码，因为 Librocket 不支持。提前致谢！

4

1 回答 1

2

在搜索了 libRocket 源代码后，我在 ElementTabSet.cpp 中找到了以下内容：

if (old_tab)
    old_tab->SetPseudoClass("selected", false);
if (new_tab)
    new_tab->SetPseudoClass("selected", true);

活动选项卡始终应用 :selected 伪类。因此，您可以按如下方式完成您想要的：

/* DOES WORK! */
tabset tab:selected
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}
于 2015-05-06T02:57:03.580 回答