Html разворачивающийся список: Как сделать выпадающий список с помощью HTML

14.07.2023 alexxlab

Содержание

Раскрывающийся текст при клике

Я думаю, вы видели на некоторых сайтах, что некоторая часть текста изначальна невидима и только при клике на текстовую ссылку «Подробнее…», «Развернуть» или «Показать/скрыть» появляется скрытая часть текста. Это иногда удобно для навигации по тексту, если он очень большой и некоторую часть/части текста можно и даже нужно скрыть. В любом случае пользователь в любой момент может развернуть скрытый текст и прочесть его. Таким же образом можно скрыть не только текст, но и различные изображения, картинки.

Скажу по секрету, что некоторые SEO-шники таким образом скрывают текст для продвижения сайта под ссылкой простой точки, ведь этот текст предназначен для поисковиков, а не для людей, но не будем о грустном…

Раскрывающийся текст HTML

Тегов HTML, которые смогли бы развернуть при необходимости и показать скрытый текст, пока нет. На форумах в BB-коде в этих целях используется тег [spoiler][/spoiler], но он не работает в HTML.

Для раскрытия текста при клике на текстовую ссылку, нужен скрипт. Я в сети нашла очень простой скрипт.

Скрипт, раскрывающий текст

Ниже сам скрипт. Так как я знаю, как иной раз тяжело в 3 ночи что-то сообразить и понять элементарные казалось бы вещи или когда не понимаешь вообще о чём речь, но нужно кровь из носа выполнить задуманное, в скрипте подробно описано что где поменять/добавить.


Подробнее... (или любая другая надпись на ссылке, при клике на которую показывается весь скрытый изначально текст)<br />
<div>
ЗДЕСЬ ПИШЕМ ИЛИ ВСТАВЛЯЕМ ТЕКСТ, КОТОРЫЙ ДОЛЖЕН БЫТЬ ПО УМОЛЧАНИЮ СКРЫТЫМ И ПОКАЗЫВАТЬСЯ (РАСКРЫВАТЬСЯ) ТОЛЬКО ПРИ КЛИКЕ НА ССЫЛКУ "ПОДРОБНЕЕ", СО ВСЕМИ НУЖНЫМИ ТЕГАМИ.
</div>

Но этот метод, точнее, скрипт, работает только если вам необходимо скрыть на одной страничке один блок текста. В случаях, когда на одной странице таких скрывающихся блоков текста будет несколько, этот скрипт не подходит. Для этих целей есть другой скрипт, который можно использовать, как для скрытия на одной странице одного, так и нескольких блоков текста или картинок.

Скрипт ниже:

Скрипт, раскрывающий несколько блоков текста или картинок на одной странице



<p>Показать/скрыть детальную информацию о о блоке текста №1</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №1
</span>
<p>Показать/скрыть детальную информацию о о блоке текста №2</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №2
</span><p>Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №3
</span><p>Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>

Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block.

Вот и всё! В любом случае, если возникнут вопросы — пишите, буду рада помочь!

Посмотреть напутствие!

Удачи вам в этом порой нелегком деле веб-строительства, достижения всех поставленных целей, выполнения заданий в срок, постоянного совершенствования и крепкого здоровья!

Переход при выборе пункта из выпадающего списка

Опубликовано 15.

06.201315.06.2013 Автор: Николай Короткин

Давайте научимся создавать выпадающие списки с возможность включать в них активные ссылки. Таким образом, выбрав необходимый пункт, посетитель вашего сайта сможет перейти по ссылке, ассоциированной с этим пунктом.

Нижеприведенный способ отлично подходит для создания элемента навигации по сайту или же как способ выбора альтернативной языковой/географической версии сайта.

В начале вставим в код страницы скрипт, написанный на языке JavaScript, который будет отвечать за переход.

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>

Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=»имя_функции(document. имя_формы.имя_списка)»

В нашем случае onChange=»linklist(document.menu.sel)»

Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).

Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

А в коде списка меняем событие OnChange на OnClick

<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.  redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>

Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».

Posted in HTML/xHTML.

XHTML Tutorial — выпадающий список «выбрать» тег/элемент

Домашняя страница >> Часто задаваемые вопросы/Учебники >> Учебники и советы по XHTML >> Индекс

Учебное пособие по XHTML — выпадающий список «выбрать» тег/элемент

Автор: FYIcenter. com

(Продолжение предыдущей темы…)

Что такое тег/элемент «выбрать»?

Элемент select — это встроенный элемент, который можно использовать для определения раскрывающееся поле ввода в форме. Вот основные правила для элемента select:

Элементы «select» являются встроенными элементами.
элементы «выбрать» могут использоваться только как подэлементы элементов «формы».
Элемент select не может иметь пустое содержимое.

Элемент select не может иметь текстовое содержимое.
Элемент «select» может иметь один или несколько элементов «option» в качестве подэлементов.
Элемент «выбрать» будет отображаться браузерами в виде раскрывающегося списка. с подэлементами «option», отображаемыми как опции в списке.

Вот учебный пример полей раскрывающегося списка:


 w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <голова>
  Выпадающий список 
 
 <тело>
   Онлайн-опрос 
  
  
   Ваше имя: 

   Как вы нашли FYIcenter:
    <выбрать имя="канал">

Если вы сохраните указанный выше документ как dropdown_list.html и просмотрите его с помощью Internet Explorer, вы увидите раскрывающийся список в следующем виде:

(Продолжение в следующей теме…)

Что такое тег/элемент «формы»?

Каковы атрибуты элемента «форма»?
Что такое входной тег/элемент?
Сколько типов ввода поддерживается элементами «вход»?
Как использовать «текстовые» поля ввода?
Как использовать поля ввода «пароль»?
Как использовать поля ввода «флажок»?
Какие значения отправляются в полях флажков?
Как использовать поля ввода «радио»?
Какие значения представляются в полях переключателей?
Как использовать «отправить» поля ввода/действия?
Какие значения отправляются в поля кнопки отправки?
Как использовать «сброс» полей ввода/действия?
Как использовать поля ввода «файл»?
Как использовать «скрытые» поля ввода?
Как использовать поля ввода «изображение»?
Какие значения передаются в поля кнопки изображения?
Как использовать поля ввода «кнопки»?
Что такое тег/элемент textarea?
Каковы атрибуты элемента textarea?
Что такое тег/элемент «выбрать»?
Что такое тег/элемент «option»?
Что такое тег/элемент «метка»?
Могут ли две формы быть вложенными?
Поддерживают ли браузеры несколько форм?

Выбранные вакансии разработчиков:

Подробнее. ..

10 лучших плагинов раскрывающегося списка для замены собственного поля выбора (обновление 2023 г.)

С развитием веб-технологий и повышением эстетического уровня пользователей.

Оригинальный стиль элемента

Имя *

Email *

Сайт