Як створити список, що розкривається в html без java
Ви створили дуже довгий список в HTML і хочете, щоб ваш відвідувач мав можливість згорнути або розгорнути його? Щоб налаштувати функцію, яка дозволяє відвідувачеві це зробити, прочитайте цю статтю, яка допомагає налаштувати код для виправдання цих очікувань.
Зміст
кроки
Відео: список, що розкривається html
1
Відкрийте просту програму для редагування тексту, таку як Notepad або WordPad (в ОС Windows), або TextEdit (в Mac).
Відео: Як зробити список, що розкривається в Excel
2
Починайте свій сайт, як і будь-яку іншу веб-сторінку, додавши водночас тег і
3
створіть j&# 097; vascript-частина документа, яка вказує вашому браузеру відображати списки в розкривається / розширюється формі. Використовуйте наступний код, щоб створити цей сценарій.
lt;style type="text / css"gt; .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; }}lt;/stylegt;
4
Закрийте головну частину сторінки закриттям тега для заголовка сторінки ().
5
Створіть тіло HTML коду. Введіть тег для запуску тіла () ..
Відео: Просте меню, що випадає
6
Створіть зміст списку, в тому числі деякі дані по дизайну HTML для використання користувачами в браузері, щоб розгорнути або згорнути список. Використовуйте наступний код для створення цієї процедури. Пам`ятайте про необхідність дотримання правил по створенню списків і вкладених списків всередині коду.
lt;div class="row"gt;lt;a href="# hide1" class="hide" id="hide1"gt; Expandlt;/agt;lt;a href="# show1" class="show" id="show1"gt; Collapselt;/agt;lt;div class="list"gt;lt;ulgt;lt;ligt; Item 1lt;/ligt;lt;ligt; Item 2lt;/ligt;lt;ligt; Item 3lt;/ligt;lt;/ulgt;lt;/divgt;lt;/divgt;
7
Закрийте розділ body HTML-коду, ввівши тег.
8
Введіть закриває тег для завершення створення файлу.
9
Збережіть свою роботу у вигляді файлу або з розширенням .HTML, або розширенням .HTM, і перегляньте сторінку в браузері, перш ніж повністю завантажувати її в Інтернет.
Поділитися в соц мережах:
Схожі
