JavaScript에서 Div onClick 표시/숨기기
이 기사에서는 CSS 또는 onclick() 기능을 사용하여 JavaScript에서 HTML div를 표시하고 숨기는 방법에 대해 설명합니다.
CSS를 사용하여 HTML div 표시 및 숨기기
div는 웹 페이지의 섹션 또는 분할을 정의하는 HTML의 태그 및 요소이며 div 태그 안에 콘텐츠를 추가할 수도 있습니다. div는 HTML 요소의 컨테이너로 사용되며 CSS로 지정하고 JavaScript로 사용자 정의할 수 있습니다.
CSS의 :target 키워드를 사용하여 div 섹션을 전환할 수 있습니다. :target 키워드는 대상 요소인 HTML 요소와 연결되어 속성을 변경할 수 있으며 해당 요소를 클릭하면 속성이 적용됩니다.
예를 들어 링크를 클릭할 때 특정 div를 표시할 수 있습니다. 3개의 div 요소가 있고 특정 링크를 클릭할 때 표시하려는 예를 고려해 보겠습니다.
아래 예제 코드 및 출력을 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
<style>
#html-show-hide,
#css-show-hide,
#js-show-hide {
display: none;
}
#html-show-hide:target,
#css-show-hide:target,
#js-show-hide:target {
display: block;
}
</style>
</head>
<body>
<!--Nav-Bar-->
<a href="#html-show-hide">Show HTML</a>
<a href="#css-show-hide">Show CSS</a>
<a href="#js-show-hide">Show JS</a>
<!--HTML-->
<div class="html" id="html-show-hide">
<p class="text-html" id="htmlContent">HTML div..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show-hide">
<p class="text-css" id="cssContent">CSS div..
</p>
</div>
<!--JS-->
<div class="js" id="js-show-hide">
<p class="text-js" id="jsContent">JS div..
</p>
</div>
</body>
</html>
출력:
위의 코드에서는 CSS의 display 속성을 사용하여 div 요소를 표시하거나 숨겼습니다. div 섹션을 숨기려면 display를 none으로 설정하고 섹션을 표시해야 합니다. 표시를 차단으로 설정해야 합니다.
body 태그 안에 3개의 div 요소와 클릭할 때 특정 div를 표시하는 3개의 링크를 만들었습니다. 각 div는 href 속성을 사용하는 별도의 링크로 공격됩니다.
링크를 클릭하면 href 속성이 CSS 속성 target을 트리거하여 target 속성에 이름이 첨부된 요소의 속성을 변경합니다. 위의 코드에서는 style 태그를 사용하여 HTML 파일 내에 CSS를 작성했지만 별도의 CSS 파일을 만들어 연결할 수도 있습니다.
위의 출력에서 두 번째 링크를 클릭했기 때문에 CSS div인 div 하나만 볼 수 있습니다. 다른 링크를 클릭하면 현재 보이는 div가 숨겨지고 새 div가 페이지에 표시됩니다.
onclick() 함수 및 JavaScript를 사용하여 HTML div 표시 및 숨기기
위의 예에서는 CSS의 target 속성을 사용하여 클릭 반응을 트리거했지만 onclick() 기능을 사용할 수도 있습니다. 이 기능은 JavaScript 파일 또는 script HTML의 태그와 함수 내부의 코드가 실행됩니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
</head>
<body>
<button onclick="showHide()">Show hide</button>
<div class="html" id="show-hide">
<p>HTML div..
</p>
</div>
<script>
const element = document.getElementById("show-hide");
function showHide() {
if (element.style.display === "none") {
element.style.display = "block"; // to show the element
} else {
element.style.display = "none"; // to hide the element
}
}
</script>
</body>
</html>
쇼 출력:
숨기기로 출력:
위의 HTML 코드에서 우리는 id가 show-hide인 div 섹션과 script 태그 안에 있는 JavaScript의 showHide() 기능을 호출하는 버튼을 만들었습니다. showHide() 함수에서 document.getElementById() 함수를 사용하여 div 요소를 가져옵니다.
먼저 if-else 문을 사용하여 style.display 속성을 사용하여 div의 가시성을 확인했으며 display 속성이 none으로 설정되어 있는 경우 이를 다음과 같이 설정해야 합니다. 차단, 차단으로 설정되어 있으면 없음으로 설정해야 합니다. 위의 출력에서 주어진 div를 토글하는 버튼을 볼 수 있습니다.
div가 숨겨져 있으면 버튼을 누를 때 표시됩니다. div가 보이는 경우 버튼을 누르면 숨겨집니다.
위의 코드에서는 script 태그를 사용하여 HTML 파일 내부에 JavaScript 코드를 작성했지만 JavaScript 파일을 생성하여 HTML 파일과 연결할 수도 있습니다.
