Question

我希望制作一个像jQuery tabs这样的标签系统，用户可以在其间切换不同的面板来查看不同的内容：

enter image description here

但是，我需要在不使用javascript的情况下完成此操作，因此没有启用javascript的用户可以轻松使用该网站。此外，我还想避免导航到不同的静态html页面，每个页面都有一个与＆＃34;标签对应的不同样式。＆＃34;什么是解决这个问题的好方法？

Answer 1

实现仅CSS标签的简单方法是使用单选按钮！

关键是要附加到相应按钮的样式labels。单选按钮本身隐藏在屏幕一侧，有一点绝对定位。

基本的html结构是：

div#holder
    input[type="radio"]
    div.content-holder
        label
        div.tab-content (all your tab content goes here)
    input[type="radio"]
    ... keep repeating

关键在选择器中。我们将使用

设置input[type="radio"]按钮的样式

input[type="radio"] {
    position: absolute;
    left: -100%;
    top: -100%;
    height: 0;
    display: none;
}

如上所述，这会将它们从屏幕的一侧抬起。但是我们如何点击它们呢？幸运的是，如果您定位label，它可以为您点击输入！

<label for="radioInputId1">tab title</label>

然后我们设计实际标签的样式（为了简洁起见，我将忽略美学风格）：

input[type="radio"] + div.content-holder > label {
    display: inline-block;
    float: left;
    height: 35px;
    width: 33%; /* or whatever width you want */
}

现在我们的标签看起来应该像＆＃34;标签＆＃34;位于div#holder的顶部。但那些内容呢？好吧，我们希望默认情况下都隐藏它，所以我们可以使用以下选择器来定位它：

input[type="radio"] + div.content-holder > div.tab-content {
    display: none;
    position: absolute;
    top: 65px;        /* this depends on your label height */
    width: 100%;
}

上面的CSS是使其工作所需的最小CSS。 display: none;以外的所有内容都是您在实际显示div时看到的内容。但是这没有在标签中显示任何内容，所以...现在是什么？

input[type="radio"]:checked + div.content-holder > div.tab-content {
    display: block;
}

上述工作原因是因为:checked伪类。由于label附加到特定的单选按钮，因此它们会在点击时触发:checked。这会自动关闭所有其他单选按钮。因为我们已经在div.content-holder中包装了所有内容，所以我们可以使用下一个兄弟CSS选择器+来确保我们只定位特定的标签。（尝试使用~，看看会发生什么！）

这里有一个fiddle，对于那些不喜欢堆叠片段的人来说，这里有一个堆叠代码段，对于那些你这样做的人：

＆＃13;

#holder {
  border: solid 1px black;
  display: block;
  height: 500px;
  position: relative;
  width: 600px;
}
p {
  margin: 5px 0 0 5px;
}
input[type="radio"] {
  display: none;
  height: 0;
  left: -100%;
  position: absolute;
  top: -100%;
}
input[type="radio"] + div.content-holder > label {
  background-color: #7BE;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  float: left;
  height: 35px;
  margin: 5px 0 0 2px;
  padding: 15px 0 0 0;
  text-align: center;
  width: 33%;
}
input[type="radio"] + div.content-holder > div {
  display: none;
  position: absolute;
  text-align: center;
  top: 65px;
  width: 100%;
}
input[type="radio"]:checked + div.content-holder > div {
  display: block;
}
input[type="radio"]:checked + div.content-holder > label {
  background-color: #B1CF6F;
}
img {
  left: 0;
  margin: 15px auto auto auto;
  position: absolute;
  right: 0;
}

＆＃13;

<div id="holder">
  <input type="radio" name="tabs" value="1" id="check1" checked>
  <div class="content-holder">
    <label for="check1">one</label>
    <div class="tab-content">
      <p>All my content for the first tab goes here.</p>
    </div>
  </div>
  <input type="radio" name="tabs" value="2" id="check2">
  <div class="content-holder">
    <label for="check2">two</label>
    <div class="tab-content">
      <h2>You can put whatever you want in your tabs!</h2>
      <p>Any content, anywhere!</p>
      <p>
        Remember, though, they're absolutely positioned.
        This means they position themselves relative to
        their parent, div#holder, which is relatively positioned
      </p>
    </div>
  </div>
  <input type="radio" name="tabs" value="3" id="check3">
  <div class="content-holder">
    <label for="check3">three</label>
    <div class="tab-content">
      <p>
        And maybe I want a picture of a nice cat in my third tab!
      </p>
      <img src="http://i.stack.imgur.com/Bgaea.jpg">
    </div>
  </div>
</div>

＆＃13;

我设计的标签非常基本。如果你想要他们＆＃34;包装＆＃34;进入内容，你可以通过一些额外的CSS工作来做到这一点。

如何只使用CSS制作标签？

1 个答案: