クリックするとタブの背景とフォントの色が変わります

Question

HTMLページにタブ付きの枠があります。タスクでは次の変更を行う必要があります。

1. タブまたはホバーを選択すると、背景 - 白、テキストカラー - ＃6baed9、border - 1pxテキストと同じ色です。

2. タブが選択されていない場合（選択されている場合、このタブは選択されていません） - 背景 - ＃6baed9、テキストの色 - 白、境界 - 1pxテキストと同じ色。この中

   1. ケース2は、上記の場合にタブがないときに、私は白のテキストの色を取得カント：

   私の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 
   } 
   

   の問題です選択された。

3. 選択したタブの境界線は問題ありませんが、最終行は表示されません。なぜですか。

どうすればよいですか？

PS：#my_settings ul.tab li a {をcolor : #fffに変更しようとすると、正常に動作します。しかし、ページのどこかをクリックすると、選択したタブの色（＃6baed9）が白くなります。

Answer 1

$(".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>

あなたはクラスウィッヒを挿入するためにjqueryのabove.useスニペットのような設定を使用することができますが、あなたがホバーに変更するか、をクリックしたい性質を有しています。

Answer 2

アクティブなタブに<li class="active">を設定していますか？