PHP (Hypertext Preprocessor) 是一種伺服器端程式語言，它適用於動態網頁開發。在PHP中，我們可以使用JavaScript來控制網頁的顯示效果，其中包含顯示和隱藏程式碼區塊。在本文中，我們將介紹如何使用PHP和JavaScript來實作在點擊按鈕時顯示和隱藏程式碼。
第一步：建立一個按鈕
首先，在需要使用按鈕的頁面中建立一個按鈕。要建立一個按鈕，請在HTML檔案中加入以下程式碼：
<button id="showCode">显示代码</button>
在這個按鈕元素中，我們定義了一個ID名稱為「showCode」。
此外，我們也為按鈕新增了一個「顯示程式碼」的文字。
第二步：新增需要隱藏或顯示的程式碼
接下來，在頁面的程式碼中加入需要控制顯示和隱藏的程式碼。
在這個範例中，我們將使用一個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;”，這意味著在頁面載入時該元素將被隱藏。
第三個步驟：新增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元素目前的狀態。
第四個步驟：測試按鈕
現在，我們已經建立了按鈕，新增了需要顯示或隱藏的程式碼，並且新增了JavaScript腳本，我們可以測試按鈕是否正常工作了。在頁面上點擊按鈕，我們應該可以看到程式碼的顯示或隱藏狀態變更。
在此範例中，按鈕將從「顯示程式碼」變更為「隱藏程式碼」以反映其目前狀態。
總結
在這篇文章中，我們介紹如何使用PHP和JavaScript來實現點擊按鈕時顯示和隱藏程式碼。透過建立一個按鈕，新增需要隱藏或顯示的程式碼，以及使用JavaScript腳本來回應點擊事件，我們可以控製程式碼元素的顯示和隱藏。隨著我們的網頁越來越複雜，這種技術可以使我們更靈活地控制網頁的外觀和功能。
以上是php頁面利用JavaScript實作點擊按鈕顯示隱藏程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
