HTML-tab-Schnittstelle, die nur mithilfe von CSS

ist es möglich, eine Oberfläche mit Registerkarten mit nur css, kein javascript?
Ich meine, in der Lage sein zu wechseln, die tabs mit css/html, ohne javascript. Vielleicht mit CSS 3.0?

markup wäre so etwas wie:

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>
JavaScript-weniger Wechselwirkungen werden in der Theorie schön, aber Sie brechen die "holy-trinity" in der web-Entwicklung. HTML ist gedacht für den Inhalt (Model), CSS ist dafür gedacht, Stil (Ansicht), JavaScript gemeint ist, für die Interaktion (Controller). Wenn Sie nicht möchten, zu verwenden, JavaScript, HTML, und CSS haben, um die slack, was bedeutet, dass Sie ändern Ihres markup, um den Stil zu ändern. Sie sollten im Allgemeinen lassen sich die Interaktionen in JavaScript, und planen Sie für graceful degradation mit Ihrem style sheets.
HTML ist meiner Meinung nach gemeint ist die werden die Aussicht. Das Modell ist, wo die Daten liegt (in einer Datenbank?) und der controller ist der code, der manipuliert die Daten (PHP oder ASP auf dem server, vielleicht?) CSS und JavaScript sind visuelle Verbesserungen, aber wenn Sie entfernt werden, die website sollte noch funktionieren - sonst würde es brechen die HTTP-Modell!
Im Kontext des UI -, HTML-enthält die Daten und das Modell. Wenn Sie sprechen über die übergreifenden Kontext einer web-Anwendung, die Ihre Datenbank ist das Modell der controller ist ein server-Skript und sehen Sie den generierten HTML -, CSS - & JS.
Dann jemand wie ich kommt, der surft mit JavaScript standardmäßig deaktiviert (da selbst große bekannte Seiten kompromittiert zu werden) und verflucht Ihr name für immer, da Ihre Website nicht funktioniert. Das ist einer von mehreren Gründen ist anzunehmen, progressive enhancement, die diese Frage stellt.

InformationsquelleAutor Alex | 2011-02-08

  1. 2

    Ist es möglich mit html und css für die meisten modernen Browsern mit der border-radius Eigenschaft (nicht unterstützt von internet explorer 8 und darunter).

    css

    li { -moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

    html

    <ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

    Zur Unterstützung von internet explorer, die Sie verwenden können css3pie aber Sie müssen im Hinterkopf behalten, dass es verwendet javascript.

    Finden Sie weitere Informationen über border-radius: http://www.w3.org/TR/css3-background/#the-border-radius

    Beispiel: http://jsbin.com/idiza5/2

    Ich verstehe nicht, wie diese, wurde die Antwort akzeptiert, da es die einzige ist, die nicht wirklich eine Antwort auf die Frage... O_o

    InformationsquelleAutor Sotiris

  2. 15

    :target ist in der Regel der bevorzugte Weg, das zu tun tabs.

    Können Sie auch, clever mit input:radio oder input:checkbox Elemente.

    http://jsfiddle.net/nzYnc/

    HTML:

    <label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
    First content
</div>
<input type="radio" id="two" name="tab" />
<div>
    Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
    Third content
</div>

    CSS:

    input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

    Mithilfe der next-sibling (+) und :checked Selektoren in clevere Möglichkeiten, ermöglichen es Ihnen, zu tun, eine Reine CSS-Akkordeon, toggleable Listen oder Registerkarten wie diese.

    InformationsquelleAutor zzzzBov

  3. 3

    In reinem CSS3 können Sie die :target selector zu erreichen "tabbed interface".

    Google einfach mal "tab css3 :target". Hier ist ein tutorial darüber.

    InformationsquelleAutor Knu

  4. 1

    Vor ein paar Tagen einige link, war sehr beliebt auf twitter:

    DEMO: http://cssglobe.com/lab/css3_tabs/01.html

    TUTORIAL: http://cssglobe.com/post/9579/styling-full-width-tabs-with-css3

    Hoffe, das hilft 😀

    EDIT:
    Oh, jetzt sehe ich es verwendet javascript. Die "tabs", die Sie haben, um einige div (beim anklicken) ändern der CSS-Eigenschaften auf ein anderes div, ich weiß nicht, ob Sie können jede Art von Selektoren in css3...

    aber es nutzt javascript.
    ja, ich sah, dass später vität...

    InformationsquelleAutor Cristy

Schreibe einen Kommentar