링크없이 CSS를 활성화하려면 CSS 버튼을 변경하십시오.

Question

문제가 있습니다. 우리는 웹 사이트에 CSS 스타일로 톱 메뉴를 가지고 있습니다. 문제는 단추에 기능이 연결되어 단순히 무언가를 설정하거나 해제하는 것입니다. 그러나이 링크에 URL이 첨부되어 있지 않기 때문에 "활성"CSS 스타일을 사용할 수 없습니다. 버튼이 활성화되어있을 때 버튼의 색상을 변경하려고합니다.

누군가가이 문제를 해결할 수 있습니까? 이 기능을 트리거한다

<header> 
<div class="container"> 
    <nav> 
    <ul> 
     <li><a href="javascript:void(0)" class="icon one" id="box_one">buton one</a></li> 
     <li><a href="javascript:void(0)" class="icon two" id="box_two">button two</a></li> 
    </ul> 
    </nav> 
</div> 
</header> 

, 그 부분이 제대로 작동 :

이 우리의 메뉴 HTML입니다. change() 함수는 myFunction 함수입니다!

#actieflink:active { 
padding-right: 16px; 
background-color: #004D0e; 
border-right: 0; 
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7); 
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7); 
} 

나는이 시도하지만

나를 위해 작동하지 않습니다 버튼을 클릭하고 전원이 다시 버튼을 클릭 때 때 활성화되어야하는 부분의

document.getElementById('box_two').addEventListener("click", myFunction); 

CSS 스타일

function change() { 
document.getElementById("actieflink").className='active'; 
} 

Answer 1

I have made an example here. 
http://codepen.io/anon/pen/dPRPJJ 
Clicking on a link set it to active mode. 
clicking it again turns of active mode. 

Answer 2

당신의 문제는 <a href="javascript:void(0)" class="icon one" id="box_one">buton one</a>에 클릭하면 '활성화 된'클래스 이름을 추가해야한다고 생각하십니까?

Answer 3

내가 볼 수있는 몇 가지 문제점이 있습니다. 우선 : active는 클래스가 아니므로 className 속성을 사용하여 활성 클래스를 설정할 수 없습니다. 다음이 있습니다 : actieflink : 활성. 액티 링크 란 무엇입니까? 당신이 이것을 CSS에서 사용할 때, 당신은 브라우저에게 actifelink 타입의 요소를 찾도록 지시하고 있습니다. 그것은 actifelink 태그를 찾으려고 노력할 것입니다.

function change() { 
    document.getElementById("box_one").className += 'active'; 
} 

또는 좀 더 추상적 인 방법

function change(elementId) { 
    document.getElementById(elementId).className += 'active'; 
} 

과 같이해야 당신의 CSS를 위해 : 당신이 당신의 요소에 활성 클래스를 추가하려면 , 변경 사항의 기능은 다음과 같이 보일 것이다 : 당신이 활성 상태에 대한 모든 태그가 자신의 CSS를 갖고 싶어

.active { 
    /* active state style here */ 
} 

는이처럼 수행해야합니다

a:active { 
    /* active state style here */ 
} 

하지만 className + =을 사용하면 클래스 이름을 전환하기가 어려워집니다. 다른 대안이 있습니다. jQuery의 toggleClass, addClass 및 removeClass 메소드는 훌륭하게 작동합니다. jQuery class atribute

다른 옵션 중 하나는 Element.classList입니다. 그러나 오래된 브라우저 지원을 위해서는 약간의 노력이 필요할 수 있습니다.