Я помню, когда я тестировал систему экзаменов для своих старших, я увидел их страницу экзамена, которая могла скрыть информацию, часть кандидатов слева. В то время я чувствовал себя очень высоким и гуманным. Теперь, когда я выучил JavaScript, я также могу реализовать эту функцию. Давайте покажем это.
1. Дизайн страницы:
(1) .html код:
<title> JS Column </title> <style type = "text/css"> .lignment {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 href = "#"> столбец 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> <p> <p> <a href = "#"#" href = "#"> столбец 3 </a> </p> <p> <a href = "#"> Column 4 </a> </p> <p> <a href = "#"> столбец пять </a> </p> </td> <td> <pan Id = "pic"> <img src = "image/left.png" onclick = "hide () </> </> <//strc ="/> </> <//> <//> "<//> <//> <//> </td ()"/"() <//й. <Td> Это область контента! </td> </tr> </table> </body> </html>(2). Примечание. На самом деле, эта страница очень проста, вам нужна только таблица с одной строкой и тремя столбцами. Первая часть помещает имя столбца, а третья часть - основной контент. Есть изображение левой (правой) стрелки в середине. Раньше я слишком много думал и думал, что это был очень потрясающий контроль.
2. Код Javascript:
<script language = "javascript" type = "text/javascript"> function hide () // Нажмите на стрелку левого, чтобы скрыть часть столбца {// Шаг 1: скрыть список столбцов. // Шаг 2: замените изображение стрелки одновременно. Событие, отвечающее на левую стрелку, предназначено для отображения show () document.getElementbyId ("pic"). Innerhtml = "<img src = 'image /right.png' onclick = 'show ()' />"; } function show () // Щелкните стрелку вправо, чтобы отобразить скрытую часть столбца {// Шаг 1: отображать список столбцов. // Шаг 2: Измените изображение стрелки одновременно. Событие, отвечающее на левую стрелку, состоит в том, чтобы скрыть hide () document.getElementbyId ("pic"). Innerhtml = "<img src = 'image /left.png' onclick = 'hide ()' />"; } </script>(1) Эффект:
(2) Примечание: первоначально отображается «стрелка левого». Нажав на изображение, ответит на событие Hide (), скрыть часть столбца и изменить стрелку левого на стрелку вправо. При нажатии на «Стрелка правого» событие Show () будет отвечать, отображая скрытую часть столбца, а стрелка правой стрелки заменяется стрелкой левого, а затем возвращается в исходное состояние. Это на самом деле очень просто и легко сделать.
На этом этапе обучения JavaScript это очень интересно. Когда я ничего не знал раньше, я всегда думал об этом усердно, оказывая на меня психологическое давление. Когда я испытал это сам, я обнаружил, что это было только это, и медленно развил интерес к обучению. Теперь при входе на веб -сайт или используя программное обеспечение, вы невольно рассмотрите, как оно реализовано, где это сделано хорошо, и где оно требует улучшения, и постепенно подходить к профессионалу.
В JavaScript еще есть много вещей. Сегодня мы показываем, это только верхушка айсберга. Продолжайте подбадривать с интересом и любопытством!