Recuerdo que cuando estaba probando el sistema de examen para mis mayores, vi su página de examen que podía ocultar la parte de la información de los candidatos a la izquierda. En ese momento, me sentí muy alto y humano. Ahora que he aprendido JavaScript, también puedo implementar esta función. Vamos a mostrarlo.
1. Diseño de página:
(1) Código .html:
<title> js columna </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 = "#"> columna 1 </a> </p> <p> <a href = "#"> columna 2 </a> </p> <p> <p> <p> href = "#"> columna 3 </a> </p> <p> <a href = "#"> columna 4 </a> </p> <p> <a href = "#"> columna 4 </a> </p> <p> <a href = "#"> columna 1 </a> </p> <p> <a href = "#"> columna 2 </a> </p. href = "#"> columna 3 </a> </p> <p> <a href = "#"> columna 4 </a> </p> <p> <a href = "#"> columna cinco </a> </p> </td> <td> <span id = "pic"> <img src = "image/izquierda.png" onclick = "hide ()" <TD> ¡Este es el área de contenido! </td> </tr> </table> </body> </html>(2). Nota: En realidad, esta página es muy simple, solo necesita una tabla con una fila y tres columnas. La primera parte coloca el nombre de la columna, y la tercera parte es el contenido principal. Hay una imagen de la flecha izquierda (derecha) en el medio. Solía pensar demasiado y pensaba que era un control muy impresionante.
2. Código JavaScript:
<script language = "javascript" type = "text/javaScript"> function hide () // Haga clic en la flecha izquierda para ocultar la parte de la columna {// Paso 1: ocultar la lista de columnas document.getElementById ("lanmu"). style.display = "Ninguno"; // Paso 2: reemplace la imagen de la flecha al mismo tiempo. El evento que responde a la flecha izquierda es mostrar show () document.getElementById ("pic"). Innerhtml = "<img src = 'image /right.png' onClick = 'show ()' />"; } función show () // Haga clic en la flecha derecha para mostrar la parte de la columna oculta {// Paso 1: Muestre la lista de columnas document.getElementById ("Lanmu"). style.display = ""; // Paso 2: cambie la imagen de flecha al mismo tiempo. El evento que responde a la flecha izquierda es ocultar () document.getElementById ("Pic"). InnerHtml = "<img src = 'image /left.png' onClick = 'hide ()' />"; } </script>(1) Efecto:
(2) Nota: La "flecha izquierda" se muestra inicialmente. Al hacer clic en la imagen, responderá al evento Hide (), ocultará la parte de la columna y cambiará la flecha izquierda a la flecha derecha. Al hacer clic en "Flecha derecha", se responderá el evento Show (), mostrando la parte de la columna oculta, y la flecha derecha es reemplazada por la flecha izquierda y luego regresando al estado original. Esto es en realidad muy simple y fácil de hacer.
A través de esta etapa del aprendizaje de JavaScript, se siente muy interesante. Cuando no sabía nada antes, siempre pensé que era difícil, poniéndome presión psicológica sobre mí. Cuando lo experimenté yo mismo, descubrí que era solo eso y lentamente desarrollé un interés en el aprendizaje. Ahora, al iniciar sesión en un sitio web o utilizar un software, considerará involuntariamente cómo se implementa, dónde se hace bien y dónde necesita mejorar, y se acercará gradualmente a un profesional.
Todavía hay muchas cosas que aprender en JavaScript. Hoy, lo que estamos mostrando es solo la punta del iceberg. ¡Sigue animando con interés y curiosidad!