Question

我正在尝试使用带有标签的框，并且已经找到了许多关于如何使用javascript在标签之间切换的教程。反正有没有javascript的标签吗？

Answer 1

这里有一个现已死的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的情况下访问我的页面。

Answer 2

找到这个，希望它能解决你的问题

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;
}

Answer 3

搜索CSS标签或转到此处：

http://unraveled.com/publications/css_tabs/

编辑：我是这些标签的作者。它们曾经是CSS在实践中的一个很好的例子，但它们已经过时了。我建议使用更多当前的框架，如Bootstrap或Foundation。 - 约书亚考夫曼

Answer 4

此方法与: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选择器，并且它们都是ALL类。 ID没有严格的要求

基本思想是创建一个具有已知尺寸的视口，该视口相对或绝对定位在页面上的某个位置。这将是选项卡的显示区域。现在，您可以剪辑溢出以隐藏除第一个选项卡以外的所有内容，而不是display: none

这面临一些挑战，因此您可能会注意到每个选项卡末尾的“清除” div实际上包含命名锚点。此div有助于确保内容正确推送，而不是部分滚动到视图中。有时候需要进行一些细微的调整，根据您的设计需求，它们总是非常简单。

如果愿意，可以将导航链接嵌入到单选按钮中以检测“已检查”状态。我还完成了其中在活动选项卡各不相同的每个选项卡中仅重复导航的情况。虽然是多余的，但它提供了一个有趣的导航，它可以是动态的平铺，提供2D空间。玩起来很有趣，但是通常我只是选择使用jQuery.toggle（）切换导航中的类。

是否有可能没有JavaScript的标签

4 个答案: