先輩の試験システムをテストしていたとき、左側の候補者の情報部分を隠すことができる彼らの試験ページを見ました。当時、私は非常に背が高くて人道的でした。 JavaScriptを学んだので、この関数を実装することもできます。見せてみましょう。
1。ページデザイン：
（1）.htmlコード：
<title> js column </title> <style type = "text/css"> .alignment {text-align：center; } </style> </head> <スクリプト言語= "javascript" type = "text/javascript"> // ..../ ..../ ...... </script> <body> <table> <tr> <td id = "lanmu"> <p> <a href = "＃">列1 </a> </p href = "＃">列3 </a> </p> <p> <a href = "＃">列4 </a> </p> <p> <a href = "＃">列4 </a> </p> <p> href = "＃">列3 </a> </p> <p> <a href = "＃">列4 </a> </p> <p> <a href = "＃">列5 </a> </p> </td> <td> <span id = "pic"> <img src = "image/lept.png"/> </>> </td> <td>これはコンテンツ領域です！ </td> </tr> </table> </body> </html>（2）。注：実際、このページは非常にシンプルで、1列と3列のテーブルのみが必要です。最初の部分は列名を付け、3番目の部分はメインコンテンツです。真ん中に左（右）の矢の写真があります。私はあまりにも多くのことを考えていて、それが非常に素晴らしいコントロールだと思っていました。
2.JavaScriptコード：
<スクリプト言語= "javascript" type = "text/javascript"> function hide（）//左矢印をクリックして列パーツを非表示にします{//ステップ1：列リストdocument.getElementbyId（ "lanmu"）。style.display = "none"; //ステップ2：矢印の画像を同時に交換します。左矢印に応答するイベントは、show（）document.getElementById（ "pic"）。innerhtml = "<img src = 'image /right.png' onclick = 'show（）' />"; } function show（）//右矢印をクリックして非表示列パートを表示します{//ステップ1：列リストdocument.getElementbyId（ "lanmu"）。style.display= ""; //ステップ2：矢印の画像を同時に変更します。左矢印に応答するイベントは、hide（）document.getElementbyId（ "pic"）。innerhtml = "<img src = 'image /left.png' onclick = 'hide（）' />"; } </script>（1）効果：
（2）注：「左矢印」が最初に表示されます。画像をクリックすると、Hide（）イベントに応答し、列部分を非表示にし、左矢印を右矢印に変更します。 「右矢印」をクリックすると、show（）イベントが応答され、非表示の列部分が表示され、右矢印が左矢印に置き換えられ、元の状態に戻ります。これは実際には非常にシンプルで簡単です。
JavaScript学習のこの段階を通して、それは非常に興味深いと感じています。以前は何も知らなかったとき、私はいつもそれが難しいと思って、自分に心理的なプレッシャーをかけました。自分でそれを経験したとき、それはまさにそれであり、ゆっくりと学習に興味を持っていることがわかりました。今、ウェブサイトにログインしたり、ソフトウェアを使用したりすると、それがどのように実装されているか、どこでうまくやられているか、どこで改善が必要なかを考慮し、徐々に専門家にアプローチします。
JavaScriptにはまだ多くのことがあります。今日、私たちが見せているのは、氷山の一角にすぎません。興味と好奇心で応援し続けてください！