클릭 할 때 탭 배경 및 글꼴 색이 바뀝니다

Question

내 HTML 페이지에 탭 패널이 있습니다. 다음 변경 사항이 작업에서 수행되어야합니다.

1. 선택시 탭이나 마우스를 가져 배경 - 흰색, 텍스트 색상 - # 6baed9, 테두리 - 텍스트로 1 픽셀의 같은 색.

2. 탭을 선택하지 않은 경우 (다른 탭을 선택하면 선택 취소됩니다) - 배경 - # 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 
} 

문제

내가 가지고 다음과 같습니다 :이에서

1. 때 위의 경우 2, 탭하지 않을 때 나는 흰색 텍스트 색상을 얻을 질수 선택된.

2. 선택한 탭의 테두리가 좋지만 하단 줄이 보이지 않습니다. 왜 그럴까요?

도와주세요.

추신 : #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">을 설정하고 있습니까?