是否可以在没有 javascript 的情况下使用选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6906724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to have tabs without javascript
提问by sameold
I'm trying to have a box with tabs, and have found many tutorials on how it's done with javascript to switch between the tabs. Is there anyway to have tabs without javascript?
我正在尝试创建一个带有选项卡的框，并且找到了许多关于如何使用 javascript 在选项卡之间切换的教程。有没有没有javascript的标签？
回答by krispy
There is an archive of the now-dead html5rockstars.com demo here: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/
这里有一个现已失效的 html5rockstars.com 演示的存档：https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed -content-area-no-js-required/
The same technique is covered, arguably better, here: http://www.sitepoint.com/css3-tabs-using-target-selector/
涵盖了相同的技术，可以说更好，这里：http: //www.sitepoint.com/css3-tabs-using-target-selector/
What it boils down to is that you use the CSS3 :targetselector to unhide whichever tab is currently selected. This will only work if there is only one set of tabs on the page, but has the advantage of complete browser back button support. For example:
归结为您使用 CSS3:target选择器取消隐藏当前选择的任何选项卡。这仅在页面上只有一组选项卡时才有效，但具有完整的浏览器后退按钮支持的优势。例如：
<ul id="menu">
<li><a href="#tab1">First tab</a></li>
<li><a href="#tab2">Second tab</a></li>
<li><a href="#tab3">Third tab</a></li>
</ul>
<div id="tab1" class="tab-content">Content of first tab</div>
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>
And then in your stylesheet:
然后在您的样式表中：
.tab-content {
display: none;
}
.tab-content:target {
display: block;
}
Unfortunately this isn't perfect, as no tab content will show up until one of the links is clicked (unless you link to page.html#tab1). The second link above suggests something like the following as a solution to that issue:
不幸的是，这并不完美，因为在单击其中一个链接之前不会显示任何选项卡内容（除非您链接到page.html#tab1）。上面的第二个链接建议使用以下内容作为该问题的解决方案：
.tab-content {
z-index: 0;
background-color: white;
position: absolute;
top: 100px;
width: 100%;
height: 300px;
}
.tab-content:first-child {
z-index: 1;
}
.tab-content:target {
z-index: 2;
}
This is somewhat hackish, and also requires absolute positioning.
这有点hackish，并且还需要绝对定位。
As an alternative, if you do not mind having your default tab be last in the html (you can order the links however you like, of course), you could do this:
作为替代方案，如果您不介意将默认选项卡放在 html 的最后一个（当然，您可以随意订购链接），您可以这样做：
<ul id="menu">
<li><a href="#tab1">First tab</a></li>
<li><a href="#tab2">Second tab</a></li>
<li><a href="#tab3">Third tab</a></li>
</ul>
<div class="tab-folder">
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>
<div id="tab1" class="tab-content">Content of first tab</div>
</div>
CSS:
CSS：
.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
display: block;
}
This is arguably the cleanest solution and the one that I would choose over the others, unless I suspected that many people would be visiting my page with CSS turned off.
这可以说是最干净的解决方案，我会选择其他解决方案，除非我怀疑很多人会在关闭 CSS 的情况下访问我的页面。
回答by chulian
Found this one, hope it solves your question
找到了这个，希望能解决你的问题
http://css-tricks.com/functional-css-tabs-revisited/
http://css-tricks.com/functional-css-tabs-revisited/
demo: http://css-tricks.com/examples/CSSTabs/radio.php
演示：http: //css-tricks.com/examples/CSSTabs/radio.php
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff
</div>
</div>
</div>
css
css
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
回答by Mrchief
Search for CSS tabs or head over here:
搜索 CSS 选项卡或前往此处：
http://unraveled.com/publications/css_tabs/
http://unraveled.com/publications/css_tabs/
EDIT: I'm the author of the these tabs. They were once a great example of CSS in practice, but they've become sorely outdated. I recommend using more current frameworks such as Bootstrap or Foundation. - Joshua Kaufman
编辑：我是这些标签的作者。它们曾经是实践中 CSS 的一个很好的例子，但它们已经过时了。我建议使用更当前的框架，例如 Bootstrap 或 Foundation。- 约书亚考夫曼
