是否有可能沒有javascript的標籤

Question

我想要一個帶有選項卡的框，並且已經找到了很多關於如何使用javascript在選項卡之間切換的教程。反正有沒有javascript的標籤？

Answer 1

搜索CSS標籤或頭看過來：

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

編輯：我是這些標籤的作者。他們曾經是CSS的一個很好的例子，但他們已經過時了。我建議使用更多當前的框架，比如Bootstrap或Foundation。 - 約書亞考夫曼

Answer 2

這個問題是舊的，但顯示在谷歌搜索結果的頂部。這裏有現在死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; 
} 

這有點hackish的，而且還需要絕對定位。

作爲替代方案，如果你不介意你的默認選項卡是最後的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 3

發現這個一個，希望能解決你的問題

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