비활성화 버튼을 활성화하십시오 html5/css/javascript

Question

나는 계산기를 만들었습니다. 나는 다음 웹 페이지에 그것을 올렸다.

www.vipulshree.com

내가 그것을 클릭에 버튼을 선택하고 다른 버튼을 클릭 할 때 그것에서 강조 표시를 제거합니다. 다음 버튼을 클릭하면 색상/비활성화/강조 표시가 변경되고 이전 버튼이 정상으로 돌아옵니다. 제발 나를 돕기 위해 그물을 뒤져서 아무것도 찾지 못했습니다. 절 절실히 도와주세요.

감사합니다.

Answer 1

CSS 의사 선택기 :focus을 사용하십시오. 현재 포커스가있는 요소와 일치합니다.는 클릭에 클래스 .focused을 추가

---

를 사용하여 자바 스크립트 버튼 작업, 그리고 다른 모든 요소를 ​​제거 할 것 같습니다. 모든 버튼의 공통 부모에 대해 이벤트 위임을 사용하십시오 (이 코드에서는 #container으로 가정 함). 당신은 버튼에 클래스를 정의하고 다음의 색상을 변경할 수 있습니다 클릭 이벤트를 사용하여, 언제 할 수

<div id="container"> 
    <button>1</button> 
    <button>2</button> 
    <button>3</button> 
    <button>4</button> 
    <button>5</button> 
</div> 

Working Example

Answer 2

:

<script type="text/javascript"> 
    setFocus = function(e) { 
     if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = ''; 
     if (e.target.tagName.toLowerCase() == 'button') { 
      e.target.className = 'focus'; 
     } 
    }; 
    document 
     .getElementById('container') 
     .onclick = setFocus; 
</script> 

내 HTML 마크 업이처럼 보였다 당신은 어떤 버튼을 클릭하면 "이전"이라고 말하는 변수에 저장됩니다.

다른 단추를 클릭하면 저장된 단추 변수 의 색을 변경하고 현재 단추를 해당 변수에 지정합니다.

var previous; 
document.getElementsByClassName("className").onclick = function(){ 
    // change the color of the previous element 
    previous = this; 
    // change the color of this button 
} 

Answer 3

여기에만 DOM 준비 로더와 하이라이트 효과를 할 수있는 CSS 클래스에 대한 jQuery를 사용하고, 조금 jsfiddle 일 예이다.

http://jsfiddle.net/t6bJ3/

var buttons = document.getElementsByTagName('button'), 
     buttonsLength = buttons.length, 
     selected, 
     i = 0, 
     reset = function() { 
      for (i = 0; i < buttonsLength; i++) buttons[i].className = ''; 
     }, 
     highlight = function(ev) { 
      reset(); 
      ev.target.className = 'highlight'; 
     }; 

    for (; i < buttonsLength; i++) buttons[i].onclick = highlight;