CSS에서 활성 상태 유지하기

Question

로그인 폼을 만들고 있는데 자바 스크립트에서 숨기기/표시 상태를하고 있습니다.

페이지를로드 할 때 첫 번째 버튼이 활성 상태이고 다른 버튼을 클릭하면 활성 상태가되고 이전 버튼은 더 이상 활성화되지 않습니다.

내 HTML :

<a class="login-button" >login</a><a class="login-button">register</a><a class="login-button">cant login?</a> 

내 CSS :

.login-button 
{color:#00BFFF; 
padding-right:20px; 
} 
.login-button:active 
{ color:#FFF; 
font-family:customfont-bold; 
} 

Answer 1

당신이 이것을 달성하기 위해 자바 스크립트 또는 jQuery를 사용할 수 있습니다. 다음은 더 구체적으로 선택기를 사용할 수의 - 물론

$("a").click(function() { 
    $("a").removeClass("active"); 
    $(this).addClass("active"); 
}); 

CSS

.active 
{ 
    color:#FFF; 
    font-weight:bold; 
} 

에 대한 샘플입니다.

Answer 2

JavaScript는 @Sachin을 가리 키거나 순수 CSS에서 사용하면 :target 가짜 균열을 사용할 수 있습니다.

당신이해야 할 일은 앵커 태그에 하이퍼 링크 참조 (href)를 추가하는 것입니다. 그러면 마크 업을 더 의미 론적으로 만들 수 있습니다.

HTML

<a href="#login" id="login" class="login-button">login</a> 

CSS 당신은 내가 CSS 솔루션은 좋은 것이라고 생각 단지 css/html로 질문을 taget 때문에

#login:target { 
    color:#FFF; 
    font-family:customfont-bold; 
} 

.

function{ 
     var element = document.getElementsByClassName("login-button active"); 
     element.className="login-button"; 
} 

또한 일부 id=""을 추가 할 수 있습니다

Answer 3

그냥 예를 들어 유 그리고 다른 하나에서 변경하는 자바 스크립트 함수를 삽입 class="login-button active"

에 처음 활성 표시 할 클래스를, 이름 변경 변경을 쉽게하기 위해서입니다. 그렇다면 다음을 사용할 수 있습니다 :

var element = document.getElementById("yourID");