Хобрук: Ваш путь к мастерству в программировании

Как создать раскрывающееся меню со ссылкой на определенную часть страницы?

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

Вот что я пробовал:

     <form>
   <fieldset>
      <legend>Select Your Location</legend>
      <p>
         <select id = "myList">
           <option value = "#ReigateEvents">Reigate</option>
           <option value = "#GodalmingEvents">Godalming</option>
           <option value = "#Enquiry">I don't see my location here</option>
         </select>
      </p>
   </fieldset>
</form>
html drop-down-menu
12.12.2017

  • покажите нам, что вы пробовали (совет: используйте встроенный движок html/js) 12.12.2017
  • @Edwin Я добавил то, что у меня есть на данный момент 12.12.2017

Ответы:


1

Вам просто нужно добавить #после ссылки.

Попробуйте что-то вроде этого:

<ul>
<li><a href="/page.html#part1">Part 1</a></li>
<li><a href="/page.html#part2">Part 2</a></li>
<li><a href="/page2.html#part2">Page 2 Part 1</a></li>

Edited

<select id = "myList" onchange="javascript:location.href = this.value;">
<option value = "page.html#ReigateEvents">Reigate</option>
<option value = "page.html#GodalmingEvents">Godalming</option>
<option value = "page.html#Enquiry">I don't see my location here</option>

12.12.2017
  • Это ведь не раскрывающийся список? Это обычный список. 12.12.2017
  • ХОРОШО. Вам нужна опция «Выбрать». Проверьте мой отредактированный ответ 12.12.2017

    • 2

    Вы можете сделать следующее с помощью javascript.

    function myAnchor(value){
  var top = document.getElementById(value).offsetTop;
  window.scrollTo(0, top);
	//document.getElementById(value).scrollIntoView();
}
    p{
    height: 1500px;
}
    <select id = "myList" onchange="myAnchor(this.value)">
  <option value ="test">Reigate</option>
  <option value ="GodalmingEvents">Godalming</option>
  <option value ="Enquiry">I don't see my location here</option>
</select>

<h2 id="GodalmingEvents">
  GodalmingEvents
</h2>
<h2 id="Enquiry">
  Enquiry
</h2>
<p></p>
<h1 id="test">
  test
</h1>

    12.12.2017
    Новые материалы
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..