Ich erinnere mich, als ich das Prüfungssystem für meine Senioren testete, sah ich ihre Prüfungsseite, auf der der Informationsteil der Kandidaten links verbergen konnte. Zu dieser Zeit fühlte ich mich sehr groß und human. Nachdem ich JavaScript gelernt habe, kann ich diese Funktion auch implementieren. Zeigen wir es.
1. Seitendesign:
(1) .html Code:
<title> JS-Spalte </title> <style type = "text/css"> .alignment {text-align: center; } </style> </head> <script language="javascript" type="text/javascript"> //...... </script> <body> <table> <tr> <td id="lanmu"> <p><a href="#">Column 1</a></p> <p><a href="#">Column 2</a></p> <p><a href = "#"> Spalte 3 </a> </p> <p> <a href = "#"> Spalte 4 </a> </p> <p> <a href = "#"> Spalte 4 </a> </p> <p> <a href = "#"> Spalte 1 </p> <p> <p> <p> <p> <p> <p> <p> href = "#"> Spalte 3 </a> </p> <p> <a href = "#"> Spalte 4 </a> </p> <p> <a href = "#"> Spalte fünf </a> </p> </td> <td> <span id = "pic"> <img src = "bire- <td> Dies ist der Inhaltsbereich! </td> </tr> </table> </body> </html>(2). Hinweis: Tatsächlich ist diese Seite sehr einfach, Sie benötigen nur eine Tabelle mit einer Zeile und drei Spalten. Der erste Teil setzt den Spaltennamen ein, und der dritte Teil ist der Hauptinhalt. Es gibt ein Bild des linken (rechten) Pfeils in der Mitte. Früher dachte ich zu viel und fand es eine sehr großartige Kontrolle.
2. JavaScript -Code:
<script Language = "javaScript" type = "text/javaScript"> Funktion hide () // Klicken Sie auf den linken Pfeil, um das Spaltenpart {// Schritt 1: Das Spaltenlistendokument auszublenden. // Schritt 2: Ersetzen Sie das Pfeilbild gleichzeitig. Das Ereignis, das auf den linken Pfeil reagiert, besteht darin, show () document.getElementById ("pic") anzuzeigen. InnerHtml = "<img src = 'image /rechts.png' Onclick = 'show ()' />"; } function show () // Klicken Sie auf den rechten Pfeil, um den versteckten Spaltenpart anzuzeigen {// Schritt 1: Zeigen Sie das Spaltenlistendokument an.getElementById ("lanmu"). style.display = ""; // Schritt 2: Ändern Sie gleichzeitig das Pfeilbild. Das Ereignis, das auf den linken Pfeil reagiert, besteht darin, Hide () document.GetElementById ("pic") zu verstecken. } </script>(1) Effekt:
(2) Hinweis: Der "linke Pfeil" wird ursprünglich angezeigt. Wenn Sie auf das Bild klicken, antworten Sie auf das Ereignis aus hide (), ausblenden Sie den Spaltenpart und ändern Sie den linken Pfeil auf den rechten Pfeil. Wenn Sie auf "Rechts Pfeil" klicken, wird das Ereignis show () beantwortet, auf das versteckte Spaltenpart und der rechte Pfeil durch den linken Pfeil ersetzt und dann in den ursprünglichen Zustand zurückkehren. Dies ist eigentlich sehr einfach und einfach zu tun.
In dieser Phase des JavaScript -Lernens fühlt es sich sehr interessant an. Wenn ich vorher nichts wusste, fand ich es immer schwer und setzte mich psychologischen Druck auf mich aus. Als ich es selbst erlebte, stellte ich fest, dass es genau das war und langsam ein Interesse am Lernen entwickelte. Wenn Sie sich jetzt bei einer Website anmelden oder eine Software verwenden, werden Sie unwillkürlich überlegen, wie sie implementiert wird, wo sie gut gemacht wird und wo sie verbessert werden muss, und sich allmählich an einen Fachmann wenden.
In JavaScript gibt es noch viele Dinge zu lernen. Was wir heute zeigen, ist nur die Spitze des Eisbergs. Machen Sie weiter mit Interesse und Neugier!