Question

我试图让这个jsfiddle适应没有单选按钮的工作，因为我不能使用任何<form>相关标签，也不能使用javascript！

我＆＃34;转变＆＃34;将<input type='radio'>转换为<a>标记，并将:checked伪类转换为:target 正如您在CodePen中所看到的那样。

但它不起作用： - （

还有我用来显示第一个Tab的解决方案

可以提出错误的建议吗？

由于乔

Answer 1

好吧，使用：target伪类我们可以实现这一点。

编辑：我添加了一个包装器div，因此您可以在面板上使用绝对位置。这允许您打开第一个面板并在它们之间切换。

＆＃13;

.wrapper {
  position: relative;
}
.tab-container { 
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
}

.tab-container:first-child { display: block }

:target { display: block }



/* just for demo */

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 1rem;
}

＆＃13;

<ul>
  <li><a href="#tab-1-container">Tab 1</a></li>
  <li><a href="#tab-2-container">Tab 2</a></li>
  <li><a href="#tab-3-container">Tab 3</a></li>
</ul>

<div class="wrapper">
  <div id="tab-1-container" class="tab-container">
    Tab 1 content
  </div>

  <div id="tab-2-container" class="tab-container">
  Tab 2 content
  </div>

  <div id="tab-3-container" class="tab-container">
  Tab 3 content
  </div>
</div>

＆＃13;

没有单选按钮的纯css选项卡

1 个答案: