是否可能有没有javascript的标签 [英] Is it possible to have tabs without javascript
问题描述
我试图有一个包含选项卡的框,并发现了许多教程如何使用javascript在标签之间切换。
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?
推荐答案
这个问题很旧,但是显示在Google搜索结果的顶部。这里有一个现在死的html5rockstars.com演示的存档:
https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css- to-create-a-tabbed-content-area-no-js-required /
This question is old, but shows up at the top on Google results. 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/
同样的技术被覆盖, $ b http://www.sitepoint.com/css3-tabs-using-target-selector/
The same technique is covered, arguably better, here: http://www.sitepoint.com/css3-tabs-using-target-selector/
它是什么,是使用CSS3 :target
选择器取消隐藏当前选择。例如:
What it boils down to is that you use the CSS3 :target
selector to unhide whichever tab is currently selected. For example:
<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
)。上面的第二个链接提供了类似以下解决方案的问题:
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:
.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.
或者,如果你不介意将默认标签设置为html中的最后一个(当然,你可以按照你喜欢的顺序排列链接)这是:
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:
<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关闭。
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.
这篇关于是否可能有没有javascript的标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!