PHP ページでは JavaScript を使用して、ボタンをクリックすると隠しコードが表示されます。

PHP (ハイパーテキスト プリプロセッサ) は、動的な Web 開発に適したサーバー側プログラミング言語です。 PHP では、JavaScript を使用して、コード ブロックの表示と非表示を含む Web ページの表示を制御できます。この記事では、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 要素を検索し、それが非表示になっているかどうかを確認します。現在非表示になっている場合は code div 要素が表示され、その逆も同様です。

さらに、ユーザーがボタンをクリックすると、スクリプトは div 要素の現在の状態を反映するようにボタンのテキストを変更します。

ステップ 4: ボタンをテストする

ボタンを作成し、表示または非表示にする必要があるコードを追加し、JavaScript スクリプトを追加しました。ボタンが正しく機能しているかどうかをテストできますか?ページ上のボタンをクリックすると、コードの表示または非表示の状態が変化することがわかります。

この例では、ボタンは現在の状態を反映して「コードを表示」から「コードを非表示」に変更します。

概要

この記事では、PHP と JavaScript を使用して、ボタンをクリックしたときにコードを表示または非表示にする方法を紹介しました。ボタンを作成し、非表示または表示する必要があるコードを追加し、JavaScript を使用してクリック イベントに応答することで、コード要素の表示と非表示を制御できます。 Web ページがより複雑になるにつれて、このテクノロジーにより、Web ページの外観と機能をより柔軟に制御できるようになります。

以上がPHP ページでは JavaScript を使用して、ボタンをクリックすると隠しコードが表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。