Czy można mieć zakładki bez javascript?

Question

Próbuję mieć pudełko z kartami i znalazłem wiele samouczków, jak to zrobić z javascript, aby przełączać się między kartami. Czy mimo to mam tabulatory bez javascript?

Answer 1

Szukaj kartach CSS lub głowy tutaj:

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

EDIT: Jestem autorem tych kartach. Były kiedyś świetnym przykładem CSS w praktyce, ale stały się mocno przestarzałe. Polecam korzystanie z bardziej aktualnych frameworków, takich jak Bootstrap lub Foundation. - Joshua Kaufman

Answer 2

To pytanie jest stare, ale pojawia się u góry w wynikach Google. Jest archiwum teraz-martwego html5rockstars.com demo tutaj: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

Ta sama technika jest objęty, zapewne lepiej, tutaj: http://www.sitepoint.com/css3-tabs-using-target-selector/

Co sprowadza się do tego, że należy użyć CSS3 :target selektor, aby odkryć wybraną kartę. Na przykład:

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

A następnie w arkuszu stylów:

.tab-content { 
    display: none; 
} 
.tab-content:target { 
    display: block; 
} 

Niestety to nie jest idealne, jako brak zawartości zakładka pojawi się aż jedno z ogniw kliknięciu (chyba, że ​​odwołuje się do page.html#tab1). Drugie ogniwo powyżej sugeruje coś jak następuje jako rozwiązanie tego problemu:

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

Jest to nieco hackish, a także wymaga pozycjonowania bezwzględnego.

Jako alternatywę, jeśli nie przeszkadza konieczności kartą domyślną być ostatni w html (można zamówić łączy jednak chcesz, oczywiście), można to zrobić:

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

jest to prawdopodobnie najczystsze rozwiązanie, a jeden, że wybrałbym nad innymi, chyba że podejrzewa się, że wiele osób będzie odwiedzenie mojej strony z CSS wyłączone.

Answer 3

że ten jeden, nadzieję, że to rozwiązuje swoje pytanie

http://css-tricks.com/functional-css-tabs-revisited/

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