Как я могу преобразовать список с классом в интерактивные ссылки без изменения дизайна текста?

Question

Я пытаюсь изменить слово, поэтому я использовал список с классом внутри, но я хочу нажать на слова, которые меняются.Я пробовал StackOverflow и Google, но ничего не нашел.

<ul class="content__container__list">
    <li class="content__container__list__item">Select a Language !</li>
    <li class="content__container__list__item">Escolha um Idioma !</li>
    <li class="content__container__list__item">Sélectionnez une langue !</li>
    <li class="content__container__list__item">Selecciona un idioma !</li>
</ul>

Я ожидаю, что кто-то может сказать мне, что мне нужно сделать с моим кодом, чтобы сделать один из элементов всписок кликабелен (для перенаправления меня как ссылка!).

Answer 1

Просто добавьте <a> -tags и следующие CSS . Нажмите Выполнить фрагмент кода , чтобы увидеть результат:

.content__container__list__item > a {
  text-decoration: none;
  color: black;
  /*cursor: default;  <-- enable if you also want the cursor to stay the same*/
}

<ul class="content__container__list">
    <li class="content__container__list__item"><a href="#">Select a Language !</a></li>
    <li class="content__container__list__item"><a href="#">Escolha um Idioma !</a></li>
    <li class="content__container__list__item"><a href="#">Sélectionnez une langue !</a></li>
    <li class="content__container__list__item"><a href="#">Selecciona un idioma !</a></li>
</ul>

Answer 2

Чтобы перенаправить текст на другую страницу - используйте тег a .

<ul class="content__container__list">
    <li class="content__container__list__item"><a href="#">Select a Language !</a></li>
    <li class="content__container__list__item"><a href="#">Escolha um Idioma !</a></li>
    <li class="content__container__list__item"><a href="#">Sélectionnez une langue !</a></li>
    <li class="content__container__list__item"><a href="#">Selecciona un idioma !</a></li>
</ul>

Или, если вам нужно раскрывающееся меню - см. HTML-теги select и option .