隐藏在 li 中的可见性

Question

我有这段 html 代码：

<ul class="tabs">
  <li class="tab"> <a href="#" @click="show('infos')"> Infos </a> </li>
  <li class="tab"> <a href="#" @click="show('modules')"> Modules </a>
</li>

<ul class="content-tabs">
  <li class="tab infos">
    @include('layouts.forms.trainingsForm')
  </li>
  <li class="tab modules">
    modules
  </li>
</ul>

当我单击其中一个链接时，它应该通过将 class "active" 分配给适当的

来在最后显示

的内容。这是 li 的 css 部分：

ul.content-tabs {
 border: solid 1px #ececec;
 margin: 7px 0px; 
}

ul.content-tabs li.tab {
  list-style: none;
  padding: 10px 15px;
  visibility: hidden;
}

ul.content-tabs li.active {
  visibility: visibile !important;
}

现在的问题是，即使 li 有 class "active" 它也不会显示，因为 "visibility: hidden;" 应用于 ul.content-tabs li.tab（在开发者工具中调试后）.

Answer 1

好像ul.content-tabs li.tab比ul.content-tabs li更详细所以尝试设置：

ul.content-tabs li.tab.active {
    visibility: visible !important;
}

隐藏在 li 中的可见性

visibility hidden in li

css

visibility

html-lists