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 tag。

<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>

或者，如果您需要下拉菜单，请参阅select and option HTML tags。

Answer 2

只需添加<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>

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

2 个答案: