如何通過更改選項卡更改背景顏色

Question

我有3個標簽，希望選擇標簽后其背景顏色會改變。 像這樣的東西

目前我的工作代碼是

<div class="row">
    <div class="col-lg-12">
        <ul id="myTab" class="nav nav-tabs nav-justified">
            <li class="active"><a href="#service-one" data-toggle="tab"><i class="fa fa-tree"></i> Service One</a>
            </li>
            <li class=""><a href="#service-two" data-toggle="tab"><i class="fa fa-car"></i> Service Two</a>
            </li>
            <li class=""><a href="#service-three" data-toggle="tab"><i class="fa fa-support"></i> Service Three</a>
            </li>
        </ul>

        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="service-one">
                <h4>Service One</h4>
                <p>Lorem ipsum dolor sit</p>
            </div>
            <div class="tab-pane fade" id="service-two">
                <h4>Service Two</h4>
                <p>Lorem ipsum dolor sit</p>
            </div>
            <div class="tab-pane fade" id="service-three">
                <h4>Service Three</h4>
                <p>Lorem ipsum dolor sit</p>
            </div>
        </div>

    </div>
</div>

但是我不希望所選標簽的內容有任何背景色，只有標簽的顏色應該被調整。 將不勝感激

Answer 1

好吧，因為您使用的是Boostrap，所以我認為活動課程是active

將此添加到您的CSS

#myTab .active{background: blue}

看看這個導航欄

Answer 2

#myTab li.active a{background:blue;color:white;}

如果我明白了，試試這個。

謝謝