如何只用CSS制作标签？[副本]

Question

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

但是，我需要在不使用javascript的情况下完成这一工作，以便没有启用javascript的用户可以轻松地使用该站点。此外，我希望避免导航到不同的静态HTML页面，每个页面对应于“tab”具有不同的样式。有什么好方法来解决这个问题？

Answer 1

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"] {
    position: absolute;
    left: -100%;
    top: -100%;
    height: 0;
    display: none;
}

<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 */
}

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

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

#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;
}

html lang-html prettyprint-override"><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>