我正在尝试有一个带有标签的框，并且找到了许多关于如何使用 javascript 在标签之间切换的教程。反正有没有javascript的标签吗？
【问题讨论】：
标签： javascript css
编辑：截至 2020 年，此技术仍然有效并允许链接到选项卡，但如果您要在一页上查找多个选项卡集，请参阅 @chulian 的答案，它使用 input[type=radio] 而不是 :target。
这里有一个现已失效的 html5rockstars.com 演示的存档： https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/
这里介绍了相同的技术，可以说更好： http://www.sitepoint.com/css3-tabs-using-target-selector/
归结为您使用 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>
然后在你的样式表中：
.tab-content {
display: none;
}
.tab-content:target {
display: block;
}
不幸的是，这并不完美，因为在单击其中一个链接之前不会显示任何选项卡内容（除非您链接到 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;
}
这有点骇人听闻，而且还需要绝对定位。
作为替代方案，如果您不介意将默认选项卡放在 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：
.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;
}
这可以说是最干净的解决方案，也是我会选择的解决方案，除非我怀疑很多人会在关闭 CSS 的情况下访问我的页面。
【讨论】：
找到了这个，希望能解决你的问题
http://css-tricks.com/functional-css-tabs-revisited/
演示：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
.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;
}
【讨论】：
此方法与:target 方法略有不同，它使用溢出和命名锚点。好处是您的 CSS 不需要了解有关动态内容的任何信息。生成的标记只需要匹配
<a href="#myFirstTab">Tab A</a> 在导航中使用
<a name="myFirstTab"></a> 在标签本身内（最好在最后）
.ContentArea{
width: 50vw;
height: 50vh;
position: absolute;
z-index: 1;
top: 25vh;
left: 25vw;
overflow: hidden;
}
.tab{
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
z-index: 2;
}
.clearance{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}<html>
<head>
<title>Tab Sandbox</title>
<body>
<nav class="ribbon">
<a href="#tab1">A</a> |
<a href="#tab2">B</a> |
<a href="#tab3">C</a> |
<a href="#tab4">D</a> |
<a href="#tab5">E</a>
<a href="#tab6">F</a>
</nav>
<div class="ContentArea">
<div class="tab">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br/>
<div class="clearance">
<a name="tab1"></a>
</div>
</div>
<div class="tab">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br/>
<div class="clearance">
<a name="tab2"></a>
</div>
</div>
<div class="tab">
cccccccccccccccccccccccccccccc <br/>
cccccccccccccccccccccccccccccc <br/>
cccccccccccccccccccccccccccccc <br/>
cccccccccccccccccccccccccccccc <br/>
<div class="clearance">
<a name="tab3"></a>
</div>
</div>
<div class="tab">
dddddddddddddddddddddddddddddd <br/>
dddddddddddddddddddddddddddddd <br/>
dddddddddddddddddddddddddddddd <br/>
dddddddddddddddddddddddddddddd <br/>
<div class="clearance">
<a name="tab4"></a>
</div>
</div>
<div class="tab">
eeeeeeeeeeeeeeeeeeeeeeeeeeeeee <br/>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeee <br/>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeee <br/>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeee <br/>
<div class="clearance">
<a name="tab5"></a>
</div>
</div>
<div class="tab">
ffffffffffffffffffffffffffffff <br/>
ffffffffffffffffffffffffffffff <br/>
ffffffffffffffffffffffffffffff <br/>
ffffffffffffffffffffffffffffff <br/>
<div class="clearance">
<a name="tab6"></a>
</div>
</div>
</div>
</body>
</head>
</html>这很好，因为它只使用了三个简单的 CSS 选择器，而且它们都是类。 ID 没有严格的要求
基本思想是创建一个已知尺寸的视口，相对或绝对定位在页面的某个位置。这将是您的选项卡的显示区域。现在你剪辑溢出以隐藏除第一个选项卡以外的所有选项卡，而不是 display: none
这面临一些挑战，因此您可能会注意到每个选项卡末尾的“清除” div 实际上包含命名的锚点。此 div 有助于确保内容被正确推送而不是部分滚动到视图中。偶尔需要小调整，根据您的设计需求总是非常简单。
如果您愿意，可以将导航链接嵌入到单选按钮中以检测“已检查”状态。我也这样做了，导航只是在每个选项卡中重复，活动类不同。虽然是多余的，但它提供了一个兴趣导航，可以是动态的每个图块，提供 2D 空间。玩起来很有趣，但通常我只是选择使用 jQuery.toggle() 在导航中切换一个类
【讨论】：