Як створити список, що розкривається в HTML без Java
Ви створили дуже довгий список в HTML і хочете, щоб ваш відвідувач мав можливість згорнути або розгорнути його? Щоб налаштувати функцію, яка дозволяє відвідувачеві це зробити, прочитайте цю статтю, яка допомагає налаштувати код для виправдання цих очікувань.
Кроки
1
Відкрийте просту програму для редагування тексту, таку як Notepad або WordPad (в ОС Windows), або TextEdit (в Mac).
2
Починайте свій сайт, як і будь-яку іншу веб-сторінку, додавши одночасно тег і .3
Створіть javascript-частина документа, яка вказує вашому браузеру відображати списки в розкривається / розширюваної формі. Використовуйте наступний код, щоб створити цей сценарій.
<<span class="kw2">style type="Text / css".row {vertical-align: top- height: auto! important-} .list {display: none; } .show {Display: none; } .hide: Target + .show {display: inline-} .hide: target {display: none; } .hide: Target ~ .list {display: inline-}media print {.hide, .show {display: none; }}<<span class="sy0">/style
1
Закрийте головну частину сторінки закриттям тега для заголовка сторінки ().
2
Створіть тіло HTML коду. Введіть тег для запуску тіла ().3
Створіть зміст списку, в тому числі деякі дані по дизайну HTML для використання користувачами в браузері, щоб розгорнути або згорнути список. Використовуйте наступний код для створення цієї процедури. Пам`ятайте про необхідність дотримання правил по створенню списків і вкладених списків всередині коду.
<<span class="kw2">div class="Row"<<span class="kw2">a href="# Hide1" class="Hide" id="Hide1"Expand<<span class="sy0">/a<<span class="kw2">a href="# Show1" class="Show" id="Show1"Collapse<<span class="sy0">/a<<span class="kw2">div class="List"<<span class="kw2">ul<<span class="kw2">liItem 1<<span class="sy0">/li<<span class="kw2">liItem 2<<span class="sy0">/li<<span class="kw2">liItem 3<<span class="sy0">/li<<span class="sy0">/ul<<span class="sy0">/div<<span class="sy0">/div
1
Закрийте розділ body HTML-коду, ввівши тег .2
Введіть закриває тег для завершення створення файлу.3
Збережіть свою роботу у вигляді файлу або з розширенням.HTML, або розширенням .HTM, і перегляньте сторінку в браузері, перш ніж повністю завантажувати її в Інтернет.
