PHP 페이지는 JavaScript를 사용하여 버튼을 클릭할 때 숨겨진 코드를 표시합니다.

PHP(Hypertext Preprocessor)는 동적 웹 개발에 적합한 서버측 프로그래밍 언어입니다. PHP에서는 JavaScript를 사용하여 코드 블록 표시 및 숨기기를 포함하여 웹 페이지 표시를 제어할 수 있습니다. 이 기사에서는 버튼을 클릭할 때 PHP와 JavaScript를 사용하여 코드를 표시하고 숨기는 방법을 다룹니다.

1단계: 버튼 만들기

먼저 버튼을 사용해야 하는 페이지에 버튼을 만듭니다. 버튼을 만들려면 HTML 파일에 다음 코드를 추가하세요.

<button id="showCode">显示代码</button>

이 버튼 요소에는 "showCode"라는 이름의 ID가 정의되어 있습니다.

또한 버튼에 "코드 표시" 텍스트도 추가했습니다.

2단계: 숨기거나 표시해야 하는 코드 추가

다음으로 페이지의 코드에 표시하고 숨겨야 하는 코드를 추가합니다.

이 예에서는 DIV 요소와 일부 샘플 코드를 사용하여 설명합니다.

HTML 파일에 다음 코드를 추가합니다.

<div id="code" style="display:none;">
    <p>这里是一些示例代码：</p>
    <ul>
        <li>代码示例1</li>
        <li>代码示例2</li>
        <li>代码示例3</li>
    </ul>
</div>

이 DIV 요소에서는 ID "code"로 이름을 정의합니다. 또한 "display:none;"으로 설정했는데, 이는 페이지가 로드되는 동안 요소가 숨겨짐을 의미합니다.

3단계: JavaScript 스크립트 추가

버튼을 사용하여 코드 표시 및 숨기기를 제어하려면 일부 JavaScript 코드를 추가해야 합니다.

HTML 파일에 다음 코드를 추가하세요.

<script>
    document.getElementById("showCode").addEventListener("click", function(){
        var code = document.getElementById("code");
        if(code.style.display === "none"){
            code.style.display = "block";
            document.getElementById("showCode").innerHTML = "隐藏代码";
        }else{
            code.style.display = "none";
            document.getElementById("showCode").innerHTML = "显示代码";
        }
    });
</script>

이 JavaScript 코드는 버튼을 클릭할 때 발생하는 이벤트를 정의합니다. ID가 "code"인 DIV 요소를 찾아 숨겨져 있는지 확인합니다. 현재 숨겨져 있으면 코드 div 요소가 표시되고 그 반대의 경우도 마찬가지입니다.

또한 사용자가 버튼을 클릭하면 스크립트는 div 요소의 현재 상태를 반영하도록 버튼 텍스트를 변경합니다.

4단계: 버튼 테스트

이제 버튼을 생성하고 표시하거나 숨겨야 하는 코드를 추가하고 JavaScript 스크립트를 추가했으므로 버튼이 제대로 작동하는지 테스트할 수 있습니다. 페이지의 버튼을 클릭하면 코드의 표시 또는 숨기기 상태 변경이 표시됩니다.

이 예에서는 버튼이 현재 상태를 반영하기 위해 "코드 표시"에서 "코드 숨기기"로 변경됩니다.

요약

이 글에서는 버튼을 클릭할 때 PHP와 JavaScript를 사용하여 코드를 표시하거나 숨기는 방법을 소개했습니다. 버튼을 생성하고, 숨기거나 표시해야 하는 코드를 추가하고, JavaScript를 사용하여 클릭 이벤트에 응답함으로써 코드 요소의 표시 및 숨기기를 제어할 수 있습니다. 웹페이지가 더욱 복잡해짐에 따라 이 기술을 통해 웹페이지의 모양과 기능을 보다 유연하게 제어할 수 있습니다.

위 내용은 PHP 페이지는 JavaScript를 사용하여 버튼을 클릭할 때 숨겨진 코드를 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!