이미지 버튼 클릭시 지정 위치에 div 불러오기 채택완료
대한사랑
1년 전
조회 2,514
특정 이미지를 클릭하면 div내용이 나타났다
다시 한번 클릭하면 div내용이 사라지는 소스를 알고 싶습니다
---------------------------------------------------------------------------------------
------------------
위 소스가 특정이미지를 클릭하면 나타났다 다시 클릭하면 사라지는 소스를 알고 싶습니다
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
다음과 같은 방법도 있으니 참고해 보세요
</p>
<p> <style>
.translation-links {
display: none;
}
</style>
</p>
<p><div class="translation-links">
<img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/>
<a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
<!-- 나머지 링크들... -->
</div></p>
<p><script>
document.addEventListener('DOMContentLoaded', function () {
var translationLinks = document.querySelector('.translation-links');
var img = document.querySelector('.translation-links img');</p>
<p> // 이미지 클릭 시 이벤트 핸들러
img.addEventListener('click', function () {
if (translationLinks.style.display === 'none') {
translationLinks.style.display = 'block';
} else {
translationLinks.style.display = 'none';
}
});
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
jquery toggle 을 검색해 보세요.. 아래는 간단한 샘플입니다.
어떤 형태로든 jquery 파일은 포함시켜 줘야 합니다.
</p>
<p><script>
$(document).ready( function() {
$( 'p.a' ).click( function() {
$( 'p.b' ).toggle( 'slow' );
});
});
</script></p>
<p><style>
p.a {
cursor: pointer;
font-weight: bold;
}
</style>
<p class="a">클릭하면 감춰요</p>
<p class="b">내용은 이곳에 넣으세요</p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인