Changing text color in tab

How to change text color of tabs
December 28,
Look this sample:

    <title>ActiveWidgets Examples</title>
    <style>body {font: 12px Tahoma}</style>

<!-- include links to the script and stylesheet files -->
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/system/aw.css" rel="stylesheet"></link>

<!-- add image libraries -->
    <link href="mini.css" rel="stylesheet"></link>

<!-- change default styles, set control size and position -->

    #myTabs {width: 100%; background-color: blue;}
    #myTabs .aw-item-text {background-color: green;}
    #myTabs .aw-item-box {background-color: pink;}
    #myContent {background-color: red;}

    <h3>Tabs - hide/show content DIVs</h3>
    <p>Use onSelectedItemsChanged event and set of hidden DIVs</p>
    <pre>	tabs.onSelectedItemsChanged = function(selected){...}</pre>

<!-- insert control tags -->
    <span id="myTabs"></span>
    <div id="myContent" style="border: 1px solid #aaa; height: 200px; padding: 10px">
        <div id="div1" style="display:none">Page 1, empty.</div>
        <div id="div2" style="display:none">Page 2, still not much text here...</div>
        <div id="div3" style="display:none">Page 3, the last one.</div>

    <p>Back to <a href="index.htm">tabs examples</a>, <a href="../index.htm">all examples</a></p>

<!-- create controls -->

    var names = ["Start", "Another page", "The last page"];
    var values = ["div1", "div2", "div3"];

    var tabs = new AW.UI.Tabs;
    tabs.setItemValue(values); // store ids of content DIVs


<!-- add page behavior -->

    tabs.onSelectedItemsChanged = function(selected){

        var i, divs = document.getElementById("myContent").childNodes;

        for(i=0; i<divs.length;i++){
            if (divs[i].style) {
                divs[i].style.display = "none"; // hide all elements

        var index = selected[0];
        var value = this.getItemValue(index);
        document.getElementById(value).style.display = "block"; // show selected

    tabs.setSelectedItems([0]); // load the first page.

Paulo Cesar (PC from Brazil )
December 28,

This topic is archived.

See also:

Back to support forum