如何只使用CSS制作标签？ [英] How can I make tabs with only CSS?

问题描述

我想要制作一个标签系统，例如，对于那些不喜欢堆栈片段的人，这里是一个堆栈片段，对于那些你做的：

< pre class =snippet-code-css lang-css prettyprint-override> #holder {border：solid 1px black;显示：block; height：500px;位置：相对; width：600px;} p {margin：5px 0 0 5px;} input [type =radio] {display：none; height：0;左：-100％; position：absolute; top：-100％;} input [type =radio] + div.content-holder> label {background-color：＃7BE; border-radius：2px;颜色：＃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;}

 < div id =holder > < input type =radioname =tabsvalue =1id =check1checked> < div class =content-holder> < label for =check1>一个< / label> < div class =tab-content> < p>我在第一个标签页的所有内容都在这里。< / p> < / div> < / div> < input type =radioname =tabsvalue =2id =check2> < div class =content-holder> < label for =check2>两个< / label> < div class =tab-content> < h2>您可以在自己的标签页中输入任何您想要的内容！< / h2> < p>任何内容，任何地方！< / p> < p>记住，虽然，他们是绝对定位。这意味着它们相对于他们的父，div＃持有者，它是相对定位的< / p> < / div> < / div> < input type =radioname =tabsvalue =3id =check3> < div class =content-holder> < label for =check3> three< / label> < div class =tab-content> < p>也许我想在我的第三个选项卡上一个漂亮的猫的照片！ < / p> < img src =http://i.stack.imgur.com/Bgaea.jpg> < / div> < / div>< / div>  

风格真的很基本。如果你想让他们包装到内容中，你可以用一些额外的CSS腿部。

I'm looking to make a tab system like jQuery tabs, where users can between toggle different panels to view different content:

However, I need to accomplish this without the use of javascript, so that users without javascript enabled can easily use the site. Furthermore, I'd like to avoid navigating to different static html pages, each with a different style corresponding to the "tab." What's a good way to approach this?

解决方案

An easy way to implement CSS-only tabs is to use radio buttons!

The key is to style labels that are attached to a respective button. The radio buttons themselves are hidden, with a little absolute positioning, off the side of the screen.

The basic html structure is:

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

The key is in the selectors. We are going to style the input[type="radio"] buttons with

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

This hoists them off the side of the screen, as mentioned above. But how do we click them then? Fortunately, if you target a label, it can click the input for you!

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

Then we style the actual labels (I'm going to leave out the aesthetic styling for brevity):

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

Now our labels should look like "tabs" at the top of the div#holder. But what about all that content? Well, we want it to all be hidden by default, so we can target it with the following selector:

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

The above CSS is the minimal CSS required to get it working. Everything other than display: none; is what you will see when the div is actually displayed. But this shows nothing in the tabs, so… now what?

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

The reason the above works is because of the :checked pseudo-class. Since the labels are attached to a specific radio button, they trigger :checked on click. This automatically turns all the other radio buttons off. Because we have have wrapped everything within a div.content-holder, we can use the next sibling CSS selector, +, to make sure we only target a specific tab. (Try using ~ and see what happens!)

Here's a fiddle, for those of you who don't like stack snippets, and here's a stack snippet, for those of you who do:

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

<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>

The tabs I styled are really rather basic. If you want them to "wrap" into the content, you can do that with a little extra CSS legwork.

这篇关于如何只使用CSS制作标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！