I remember when I was testing the examination system for my seniors, I saw their examination page that could hide the information part of the candidates on the left. At that time, I felt very tall and humane. Now that I have learned JavaScript, I can also implement this function. Let’s show it.
1. Page design:
(1).html code:
<title>js column</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="#">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="#">Column 3</a></p> <p><a href="#">Column 4</a></p> <p><a href="#">Column Five</a></p> </td> <td> <span id="pic"><img src="image/left.PNG" onclick="hide()" /> </span> </td> <td>This is the content area! </td> </tr> </table> </body> </html>(2). Note: Actually, this page is very simple, you only need a table with one row and three columns. The first part puts the column name, and the third part is the main content. There is a picture of the left (right) arrow in the middle. I used to think too much and thought it was a very awesome control.
2.javascript code:
<script language="javascript" type="text/javascript"> function hide()//Click the left arrow to hide the column part { //Step 1: hide the column list document.getElementById("lanmu").style.display="none"; //Step 2: Replace the arrow image at the same time. The event responding to the left arrow is to display show() document.getElementById("pic").innerHTML="<img src='image/right.PNG' onclick='show()' />"; } function show()//Click the right arrow to display the hidden column part { //Step 1: Display the column list document.getElementById("lanmu").style.display=""; //Step 2: Change the arrow image at the same time. The event responding to the left arrow is to hide hide() document.getElementById("pic").innerHTML="<img src='image/left.PNG' onclick='hide()' />"; } </script>(1) Effect:
(2) Note: The "left arrow" is initially displayed. Clicking on the picture will respond to the hide() event, hide the column part, and change the left arrow to the right arrow. When clicking "Right Arrow", the show() event will be responded to, displaying the hidden column part, and the right arrow is replaced by the left arrow, and then returning to the original state. This is actually very simple and easy to do.
Through this stage of JavaScript learning, it feels very interesting. When I didn’t know anything before, I always thought it hard, putting myself psychological pressure on me. When I experienced it myself, I found that it was just that and slowly developed an interest in learning. Now when logging in to a website or using a software, you will involuntarily consider how it is implemented, where it is done well, and where it needs improvement, and gradually approach a professional.
There are still many things to learn in JavaScript. Today, what we are showing is just the tip of the iceberg. Keep cheering with interest and curiosity!