點擊後背景和字體顏色變化

我在我的HTML頁面中有一個選項卡窗格。任務中必須完成以下更改。點擊後背景和字體顏色變化

當選擇一個選項卡或懸停，背景 - 白色，文字顏色 - ＃6baed9，邊界 - 1px的顏色作爲文字相同。
當選項卡未被選中時（如果選中另一個選項卡，它將變爲未選中的選項） - 背景 - ＃6baed9，文本顏色 - 白色，邊框 - 1px與文本相同的顏色。

我的CSS表現如下，

#my_settings ul.tab li a { 
    display: inline-block; 
    text-align: center; 
    padding: 8px 12px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
    height:35px; 
    width:250px; 
    color: #6baed9; 
} 

#my_settings ul.tab li a:hover { 
    background-color: #fff; 
    color: #6baed9; 
    border: 1px solid #6baed9 
} 

#my_settings ul.tab li a:focus, .active { 
    background-color: #fff; 
    color: #6baed9; 
    border: 1px solid #6baed9 
}

的問題，我有：

在這個時候是上述第二種情況，我不能讓白色文本顏色，當標籤不選擇。
所選標籤的邊界很好，但底線不顯示。爲什麼？

請幫我這麼做。

PS：當我嘗試將#my_settings ul.tab li a {更改爲color : #fff時，正常工作。但是當我點擊頁面中的某個地方時，所選標籤的顏色（＃6baed9）變成白色。

來源

2016-09-27 tenten

你在任何情況下設置的顏色屬性爲＃6baed9，這代表字體顏色，只是將其更改爲#FFF –

@SandeshK檢查我的編輯 – tenten

你可以使用JavaScript點擊 – sheetal

$(".tab").click(function() { 
 
    $(".tab").removeClass('selected') 
 
    $(this).addClass('selected') 
 
}) 
 
$(".tab").hover(function() { 
 
    $(".tab").removeClass('selected') 
 
    $(this).addClass('selected') 
 
})

.tab { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: #3be9a6; 
 
    margin: 20px; 
 
    display: inline-block; 
 
    float: left 
 
} 
 
.selected { 
 
    background: #3b6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab">1</div> 
 
<div class="tab">2</div> 
 
<div class="tab">3</div> 
 
<div class="tab">4</div> 
 
<div class="tab">5</div> 
 
<div class="tab">6</div> 
 
<div class="tab">7</div>

您可以使用設置像片斷above.use jQuery來插入類至極有你想在懸停已經改變，或者單擊屬性。

來源

2016-09-27 04:54:27

後改變顏色如何改變'selected'文字顏色？ – tenten

添加顏色：「您選擇的顏色」到CSS中的.selected選擇器 –

您是否將<li class="active">設置爲活動選項卡？

來源

2016-09-27 05:05:30

點擊後背景和字體顏色變化

回答

相關問題