메뉴 닫기

가장 간단한 버튼 누르면 다른 요소 토글하는 스크립트

예를 들어 ‘AAA’ 클래스의 버튼을 눌러서 ‘BBB’ 라는 ID 요소를 없어졌다 보이게 토글하고 싶다면 아래와 같은 코드를 사용하면 된다.

스크립트

<script type="text/javascript">
function showID(id) { 
obj=document.getElementById(id);
if(obj.style.display == "inline-block")
obj.style.display="none";
else obj.style.display="inline-block"; 
}
</script>

버튼 코드(스타일은 그냥 50×50 까만색 만든것임)

<a class="AAA" href="#" onclick="showID('BBB');" style="width:50px;height:50px;background-color:#000;display:block;"></a>

‘AAA’ 클래스의 버튼을 누르면 그 뒤에 ‘showID’ 다음에 적힌 id의 요소를 토글시킨다.

없어진 버튼을 보였다 하는 코드이므로 BBB 요소는 미리 ‘display:none;’ 시켜놔야 한다.

<div id="BBB" style="display:none;">나는 사라져있지만 곧 보일것임</div>

만약 ‘AAA’ 버튼을 눌렀을 때 ‘BBB’ 말고도 ‘CCC’도 없애고 싶다던지, 즉 2가지 이상 여러개 요소가 사라지게 하고 싶다면 세미콜론을 적고 ‘showID’를 추가하면 됨.

<a href="#" onclick="showID('BBB');showID('CCC');"></a>

참고: onclick 2개 아이디에 적용시키는 방법

Posted in 지식(Knowledge), All

관련 콘텐츠(Related)

댓글 (정보 필수X)

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.