私は完全な 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 っぽい) コードの抜粋:
<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>
Librocket はそれをサポートしていないため、JavaScript コードは使用できません。前もって感謝します!