Lembro -me de quando estava testando o sistema de exames para meus idosos, vi a página de exames deles que poderia ocultar a parte da informação dos candidatos à esquerda. Naquela época, eu me senti muito alto e humano. Agora que aprendi JavaScript, também posso implementar essa função. Vamos mostrar.
1. Design de página:
(1) .html Código:
<title> coluna JS </itit> <style type = "text/css"> .alignment {text-align: Center; } </style> </ad Head> <script linguagem = "javascript" type = "text/javascript"> // ...... </sCript> <body> <table> <tr> <td id = "lanmu"> <p> <a href = "#"> colum 1 </a> </p> <p> <ahref = "#"> href = "#"> coluna 3 </a> </p> <p> <a href = "#"> coluna 4 </a> </p> <p> <a href = "#"> coluna 4 </a> </p> <p> <a href = "#"> coluna 1/a> </p> <p> <p> <p> <a href = "#"> 1/a> <p> <a href = "#"> coluna 3 </a> </p> <p> <a href = "#"> coluna 4 </a> </p> <p> <a href = "#"> coluna cinco </a> </p> </td> <td> <span id = "pics" <iMg> </span> </td> <td> Esta é a área de conteúdo! </td> </tr> </ table> </body> </html>(2). Nota: Na verdade, esta página é muito simples, você só precisa de uma tabela com uma linha e três colunas. A primeira parte coloca o nome da coluna e a terceira parte é o conteúdo principal. Há uma foto da seta esquerda (direita) no meio. Eu costumava pensar demais e achava que era um controle incrível.
2.JavaScript Código:
<Script Language = "javascript" type = "text/javascript"> function hide () // clique na seta esquerda para ocultar a parte da coluna {// Etapa 1: ocultar o documento da lista de colunas.getElementById ("lanmu"). style.display = "nenhum"; // Etapa 2: substitua a imagem da seta ao mesmo tempo. O evento que responde à seta esquerda é exibir () document.getElementById ("pic"). Innerhtml = "<img src = 'image /right.png' onclick = 'show ()' />"; } function show () // clique na seta direita para exibir a parte da coluna oculta {// Etapa 1: Exiba o documento da lista de colunas.getElementById ("lanmu"). style.display = ""; // Etapa 2: altere a imagem de seta ao mesmo tempo. O evento que responde à seta esquerda é para ocultar () document.getElementById ("pic"). Innerhtml = "<img src = 'image /left.png' onclick = 'hide ()' />"; } </script>(1) Efeito:
(2) NOTA: A "seta esquerda" é exibida inicialmente. Clicar na imagem responderá ao evento Hide (), ocultará a parte da coluna e alterará a seta esquerda para a seta direita. Ao clicar em "Arrow Right", o evento show () será respondido, exibindo a parte da coluna oculta e a seta direita é substituída pela seta esquerda e retornando ao estado original. Na verdade, isso é muito simples e fácil de fazer.
Durante esse estágio de aprendizado de JavaScript, é muito interessante. Quando eu não sabia nada antes, sempre pensei muito, colocando -me pressão psicológica em mim. Quando eu mesmo experimentei, descobri que era apenas isso e lentamente desenvolveu um interesse em aprender. Agora, ao fazer login em um site ou usar um software, você considerará involuntariamente como ele é implementado, onde é bem feito e onde precisa de melhorias e se aproximar de um profissional gradualmente.
Ainda há muitas coisas a aprender no JavaScript. Hoje, o que estamos mostrando é apenas a ponta do iceberg. Continue aplaudindo com interesse e curiosidade!