是否可能有没有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屋！