html 使用单选而不是无序列表的无类CSS选项卡式内容

3okqufwl 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(121)

我正在尝试转换下面的无类css和html，而不是list来使用单选框和标签来显示标签内容。
理想情况下，它应该是简洁的，而不是多余的，这里的设置我试图实现：

<nav>
    <input type="radio" name="tabs" checked>
    <label for="tab1">One</label>
    <input type="radio" name="tabs">
    <label for="tab2">Two</label>
    <input type="radio" name="tabs">
    <label for="tab3">Three</label>
    <section id="content2">Tab 2</section>
    <section id="content3">Tab 3</section>
    <section id="content1">Tab 1</section>
</nav>

下面是使用无序列表的选项卡式内容代码，我没有包含任何进一步的样式，只是为了显示基本内容：
x一个一个一个一个x一个一个二个x

Html

来源：https://stackoverflow.com/questions/74819915/classless-css-tabbed-content-using-radio-instead-of-unordered-list

1条答案

按热度按时间

esbemjvw1#

如果你真的想得到给定的HTML结构，那么你可以这样做，而不需要引入更多的类或id：

section {
  display: none;
}

input:checked+label[for="tab1"]~#content1 {
  display: block;
}

input:checked+label[for="tab2"]~#content2 {
  display: block;
}

input:checked+label[for="tab3"]~#content3 {
  display: block;
}

<nav>
  <input type="radio" name="tabs" checked>
  <label for="tab1">One</label>
  <input type="radio" name="tabs">
  <label for="tab2">Two</label>
  <input type="radio" name="tabs">
  <label for="tab3">Three</label>
  <section id="content2">Tab 2</section>
  <section id="content3">Tab 3</section>
  <section id="content1">Tab 1</section>
</nav>

然而，它不是很通用（如果你添加了另一个标签，那么CSS必须更新），标签没有链接到它们的输入（所以用户不能点击单词'One'。要让它工作，你必须把id=“tab1”放在那个输入中。

赞(0）回复(0）举报 2022-12-16

我来回答

html 使用单选而不是无序列表的无类CSS选项卡式内容

1条答案

相关问题

热门标签

最新问答