1

私はtiltes（Label）を持つtabContainerを持っていて、達成する必要があるのは、タブがクリックされたときです。色を赤に変更するか、アクティブな意味が何であれ、残りの非アクティブなタブはデフォルトの色のままです。Web で検索してみましたが、表示される唯一の解決策は class .tabLabel{color: Red;} を使用した css で、すべてのタブ タイトルを赤に変更します。onShow イベントも試しましたが、アラート イベントには応答できますが、スタイルシートには応答できません。また、tabcontainer に ID があり、dojo javascript で css を適用すると、タイトルではなくタブのコンテンツが変更されます。これは、達成したいことを示すために道場から入手したサンプルコードです。

    <!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="../../_static/js/dojo/../dijit/themes/claro/claro.css">

<script>dojoConfig = {parseOnLoad: true}</script><script src='../../_static/js/dojo/dojo.js'></script><script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
</head>
<body class="claro">
    <div style="width: 350px; height: 300px">
    <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
        <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
            Lorem ipsum and all around...
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>
</body>
</html>

上記のコードから、 title="My first tab" をアクティブにして、テキストと他のタブの色をデフォルトの色に変更し、2 番目のタブをクリックするとアクティブにして、最初の種類のメニューと同じアクションを実行したいと考えています。ウェブサイト上のリンク。助けてください。ありがとう

4

1 に答える 1

2

このクラスを追加することで、アクティブなタブのテキストの色を変更できます。

.dijitChecked.dijitTab .tabLabel {
    color:red;
}

ここに例があります。

于 2012-11-27T06:15:14.480 に答える