Je me souviens que lorsque je testais le système d'examen pour mes aînés, j'ai vu leur page d'examen qui pourrait masquer la partie d'information des candidats à gauche. À ce moment-là, je me sentais très grand et humain. Maintenant que j'ai appris JavaScript, je peux également implémenter cette fonction. Montons-le.
1. Conception de la page:
(1) Code .html:
<Title> JS Colonne </ Title> <Style Type = "Text / CSS"> .Alignment {Text-Align: Center; } </ style> </ head> <script linguisse = "javascript" type = "text / javascript"> // ...... </ script> <body> <s table> <tr> <td id = "lanmu"> <p> <a href = "#"> Column 1 </a> </p> <p> <a href = "#"> Column 2 </a> </p> <p> <a href = "#"> colonne href="#">Column 3</a></p> <p><a href="#">Column 4</a></p> <p><a href="#">Column 4</a></p> <p><a href="#">Column 1</a></p> <p><a href="#">Column 2</a></p> <p> <a href = "#"> colonne 3 </a> </p> <p> <a href = "#"> colonne 4 </a> </p> <p> <a href = "#"> colonne cinq </a> </p> </td> <td> <span id = "pic"> <img src = "image </span> </td> <td> C'est la zone de contenu! </td> </tr> </ table> </ body> </html>(2). Remarque: En fait, cette page est très simple, vous n'avez besoin que d'une table avec une ligne et trois colonnes. La première partie met le nom de la colonne et la troisième partie est le contenu principal. Il y a une photo de la flèche gauche (droite) au milieu. J'avais l'habitude de réfléchir trop et j'ai pensé que c'était un contrôle très génial.
2. Code javascript:
<script lingots = "javascript" type = "text / javascript"> function mash () // cliquez sur la flèche gauche pour masquer la partie colonne {// étape 1: masquer la liste de colonnes document.getElementById ("lanmu"). style.display = "nul"; // Étape 2: Remplacez l'image de flèche en même temps. L'événement répondant à la flèche gauche est d'afficher show () document.getElementById ("pic"). Innerhtml = "<img src = 'image / droit.png' onclick = 'show ()' />"; } fonction show () // cliquez sur la flèche droite pour afficher la partie de la colonne cachée {// étape 1: afficher la liste de colonnes document.getElementByid ("lanmu"). style.display = ""; // Étape 2: Modifiez l'image de flèche en même temps. L'événement qui répond à la flèche gauche est de masquer masquer () document.getElementById ("pic"). InnerHtml = "<img src = 'image / Left.png' onclick = 'hide ()' />"; } </ script>(1) Effet:
(2) Remarque: la "flèche gauche" est initialement affichée. Cliquez sur l'image répondra à l'événement mash (), masquez la partie de la colonne et changera la flèche gauche vers la flèche droite. Lorsque vous cliquez sur "Flèche droite", l'événement Show () sera répondu, affichant la partie de la colonne cachée, et la flèche droite est remplacée par la flèche gauche, puis revient à l'état d'origine. C'est en fait très simple et facile à faire.
À travers cette étape de l'apprentissage JavaScript, c'est très intéressant. Quand je ne savais rien auparavant, j'ai toujours pensé que ça a eu du mal, me mettant une pression psychologique sur moi. Quand je l'ai vécu moi-même, j'ai trouvé que c'était juste cela et j'ai lentement développé un intérêt pour l'apprentissage. Désormais, lorsque vous vous connectez à un site Web ou en utilisant un logiciel, vous examinerez involontairement comment il est mis en œuvre, où il est bien fait et où il a besoin d'amélioration, et abordez progressivement un professionnel.
Il y a encore beaucoup de choses à apprendre en JavaScript. Aujourd'hui, ce que nous montrons n'est que la pointe de l'iceberg. Continuez à applaudir avec intérêt et curiosité!