1

タイトルでこれをどのように表現するかはわかりませんでしたが、次のように設定されているとしましょう。

    <script type="text/javascript">

    $(document).ready(function(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab");
        $('#tab1').css("activeTab");
    })

    function tab1(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab"); // add class activeTab to show active
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab2(){
        $('#tabp2').show();
        $('#tabp1').hide();
        $('#tabp3').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').addClass("activeTab"); // add class activeTab to show active
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab3(){
        $('#tabp1').hide();
        $('#tabp3').show();
        $('#tabp2').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').addClass("activeTab"); // add class activeTab to show active
    }

</script>

とHTML

<div id="table-tabs">
                <ul>
                    <li id="tab1" class="tab"><a onClick="tab1();">Accommodation</a></li>
                    <li id="tab2" class="tab"><a onClick="tab2();">Special Offers</a></li>
                    <li id="tab3" class="tab"><a onClick="tab3();">Photo Gallery</a></li>
                </ul>
                <div id="tabp1">Tab 1:  nulla facilisi. Nam liber tempor cum soluta 
                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus</div>

                <div id="tabp2">Tab 2 content</div>

                <div id="tabp3">This one here is tab 3, full of Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
                    erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
            </div>
        </div><!-- end table tabs -->

最後に、CSS：

  #content-left #mainLeftContent #table-tabs ul li.oldTab{
    /* sets background and text color */
}

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.activeTab{
    background-color: #015f01;
}
#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

#content-left #mainLeftContent #table-tabs ul li.tab{
    padding: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}

以下を選択するだけでなく、JavaScriptが必要です。

#content-left #mainLeftContent #table-tabs ul li.activeTab

だけでなく：

#content-left #mainLeftContent #table-tabs ul li.activeTab a

これは可能であるはずです、何かアイデアはありますか？

ここで問題を明確にするためだけに：

javascriptはクラスactiveTabを正しく適用しますが、テキストを白にする必要があるため、（アクティブなタブの後で）を選択して色を白に変更すると、適用されません。

興味深い変更です。アンカー属性のテキストテキストサイズを変更し、サイズを変更したので、色の問題を考えています。

4

4 に答える 4

2

これら 2 つのセレクターは同じように正確です。つまり、最後に宣言されたセレクターが使用されます。

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

アクティブなときにオーバーライドされるデフォルトの色を使用して修正できます

/* white when active (now more precise because of li.activeTab */
#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}
/* default black */
#content-left #mainLeftContent #table-tabs ul li a{
    color: black;
}
于 2012-08-03T09:43:16.150 に答える
0

したがって、「#table-tabs ul li a」を選択するとします。

$("#table-tabs ul li a").click( function(e) {

e.preventDefault();

$(this).parent().toggleClass('tab activeTab'); //Remove class tab, add class activeTab

});
于 2012-08-03T09:39:29.247 に答える
0

変更する必要があります。重要な色を配置するだけで修正されます

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white !important;
}

このjsfiddleをチェックしてくださいhttp://jsfiddle.net/ENS8N/

于 2012-08-03T09:42:51.150 に答える
0

CSS を微調整した後、私の側で動作します。追加の CSS 参照をすべて追加する必要はありません。このようにシンプルにしてください。私の側では完全に機能しています。

<style type="text/css">
li.oldTab{
    /* sets background and text color */
}

li.tab a{
    color: black;
}

li.tab{
    padding: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}
li.activeTab a{
    color: white;
}

li.activeTab{
    background: #999;
}
</style>
于 2012-08-03T09:48:24.617 に答える