Click시 링크의 CSS 변경

Question

클릭하면 서로 CSS 스타일링을 변경하는 링크 버튼을 만들고 싶습니다. 이 작업 방법에 대한 자습서를 찾았습니다. 중간에이 피들에 표시된대로 작동합니다.

http://jsfiddle.net/6m3rb/23/

<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a> 
<br /><br /> 
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a> 

유일한 문제는 링크를 클릭하고 페이지가로드 될 때, 링크의 CSS 스타일링이 다시 정상으로 재설정한다는 것입니다,하지만 난 그게까지 스타일을 유지하려는 다른 링크가 눌려 있습니다.

내가 상상할 수있는 운임으로, 나는이 효과를 처리하기 위해 일부 자바 스크립트를 사용해야하지만, 자바 스크립트는 인터넷에 관해서 내가 가장 강한 지역이 아닙니다.

종류, 그것은 행동의 이미 predifned 라이브러리입니다 당신이 jQuery를 사용하려고 할 것입니다 Neros

Answer 1

이 문제를 직접 해결했습니다. 이미 정렬되지 않은 목록에서 동일한 기능을 수행 했으므로이 목록에 단추를 추가했습니다.

Answer 2

을 간주한다. 이 상황에서는 .css() 섹션에 뭔가가 필요합니다. http://api.jquery.com/css/

코드는 당신이 (순수 자바 스크립트보다 사용하기 쉽게) jQuery로 자바 스크립트를 사용할 수있는이

$('#btn1').on('click', function(e){ 
    e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters 
    $('#btn2').css('background-color': 'red'); 
}); 

Answer 3

처럼 보일 것입니다. 그런 다음 onclick 이벤트가있는 함수를 호출 할 수 있습니다.

HTML :

<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a> 
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a> 

당신은 또한 HTML에 jQuery 라이브러리를 선언해야합니다.

자바 스크립트 :

function changebtn2(){ 
    $("#btn2").removeClass("btn2"); //remove the old class 
    $("#btn2").addClass("btn2change"); //add the new class with a different color 
} 

CSS :

.btn2{ 
    color: red; 
} 
.btn2change{ 
    color: green; 
} 

Answer 4

그냥 어떤 쿼리를 통과 브라우저를 중지 무효

<a href="javascript:void(0)">Button 1</a> 

이 무효 기능으로 HREF = "#"을 대체 요청으로.