有没有可能有标签没有javascript
Is it possible to have tabs without javascript
我试图有一个有标签的框，并找到了许多关于如何用javascript在标签之间切换的教程。无论如何有标签没有javascript?
编辑:截至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>
.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>
.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
这将面临一些挑战，因此您可能会注意到"清除"每个TAB末尾的Div实际上包含命名锚。这个div有助于确保内容被正确地推送，而不是部分滚动到视图中。偶尔需要小的调整，总是基于你的设计需要非常简单。
如果你愿意，导航链接可以嵌入到单选按钮中，以检测"checked"的地位。我也这样做过，在每个选项卡中简单地重复导航，活动类不同。虽然是多余的，但它呈现了一个可以动态呈现每个贴图的兴趣导航，提供了一个2D空间。玩起来很有趣，但通常我只是选择切换一个类在导航中使用jQuery.toggle()