2012-08-14 2 views
3

다른 onclick 이벤트 중 하나가 활성화되면 어떻게 비활성화 할 수 있습니까? 두 div 모두 display : none으로 설정됩니다. CSS에서. 이것은 아마도 매우 간단하지만 프로그래밍에 익숙하지 않습니다.자바 스크립트로 onclick 속성을 비활성화하는 중

HTML

<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a> 
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a> 

예를 들어이 같이 자바 스크립트

function showDiv(id) 
{ 
    if(id == "leftbutton"){ 
    document.getElementById('orangediv').style.display = 'block'; 
    }else{ 
    document.getElementById('greendiv').style.display = 'block'; 
}} 
+0

중복 http://stackoverflow.com/questions/ ([IMG 태그에서 온 클릭 이벤트를 제거] 10712219/remove-onclick-event-from-img-tag) 및 기술적으로 [책갈피 줄을 사용하여 인라인 onclick 속성을 제거 할 수 있습니까?] (http://stackoverflow.com/questions/2562159/how-cani-i- remove-an-on-onclick-attribute-with-a-bookmarklet)도 포함됩니다. –

답변

3

이 트릭을 할해야 딸깍 하는 소리. showDiv 함수는 인수로 전체 요소를 가져올 수 있습니다. 그런 다음 해당 요소에도 액세스 할 수 있습니다. 두 번째 인수가 숨길해야 요소의 ID,

<a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a> 
    <a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a> 

그리고 JS에있을 수 있습니다 :의

var showDiv =function(el, toHide){ 
    document.getElementById(el.href).style.display = 'block'; 
    document.getElementById(toHide).style.display = 'none'; 
    el.onclick = null; //remove onclick declaration from this anchor. 

} 
+0

감사합니다. 나는 이걸 먼저 시도해 보았고 전에했던 일을했다. – ocat

0

:이 라인을 따라

function showDiv(id){ 

    if (id == "leftbutton"){ 
    document.getElementById('orangediv').style.display = 'block'; 
    document.getElementById('rightbutton').onclick = "#"; 
}else{ 
    document.getElementById('greendiv').style.display = 'block'; 
    document.getElementById('leftbutton').onclick = "#"; 
}} 
+0

감사합니다. 아주 간단합니다. – ocat

0

뭔가 :

function showDiv(id){ 
var o = document.getElementById('orangediv'); 
var g = document.getElementById('greendiv'); 
if (id == "leftbutton"){ 
    o.style.display = 'block'; 
}else{ 
    g.style.display = 'block'; 
} 
o.writeAttribute('onclick',''); 
g.writeAttribute('onclick',''); 
} 
0

다른 요소의 onclick 속성을 null로 설정하기 만하면됩니다.

이런 식으로 이렇게 는
if (id == "leftbutton"){ 
     document.getElementById('orangediv').style.display = 'block'; 
     document.getElementById('righttbutton').onclick = null; 
    } 
    else{ 
     document.getElementById('greendiv').style.display = 'block'; 
     document.getElementById('leftbutton').onclick = null; 
    } 
} 
0
function showDiv(id) { 
    if (showDiv.executed) { 
     return false; 
    } 

    if (id === "leftbutton") { 
     document.getElementById('orangediv').style.display = 'block'; 
    } else { 
     document.getElementById('greendiv').style.display = 'block'; 
    } 

    showDiv.executed = true; 
} 

showDiv.executed = false; 

, 당신은 항상 단순히 falseshowDiv.executed를 설정하여 상영을 다시 활성화 할 수 있습니다.

0

다른 요소가 표시되는 경우 테스트 수 :

function showDiv(id) 
{ 
    if(id == "leftbutton"){ 
    document.getElementById('orangediv').style.display = 'block'; 
    document.getElementById('righttbutton').onclick = null; 
    }else{ 
    document.getElementById('greendiv').style.display = 'block'; 
    document.getElementById('leftbutton').onclick = null; 
}} 
0

당신은 후 visibled해야 DIV의 ID와 href 속성을 설정할 수 있습니다

function showDiv(id) 
{ 
    if (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none')) 
    { 
     document.getElementById('orangediv').style.display = 'block'; 
    } 
    else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none')) 
    { 
     document.getElementById('greendiv').style.display = 'block'; 
    } 
} 
관련 문제