html - 如何在不更改文本设计的情况下将带有类的列表转换为可点击的链接？

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>