CSS - anzeigen / ausblenden der Inhalte mit Anker-Namen

Einzelne Seite website

Ich habe eine single-page-website (eine Seite nur). Ich kann navigieren mit einem Menü zu bekommen, um verschiedene Teile der Seite mit Anker-name, genau wie (siehe Seitenleiste):

WordPress Docs

Verstecken die anderen Sachen

Ich möchte zu verstecken Sachen, die nicht gehören zu der aktuell aktiven Seite Teil und zeigen nur die Informationen, die der Teil, den ich bin auf der Suche.

Frage(N)

  • Kann ich die verstecken Sachen, die nicht Teil der aktuellen #anchor_part nur mit CSS?
  • Haben Sie gesehen, alle Seiten tun dies bereits?
  • Nur mit CSS, ohne. Sie benötigen Javascript. Und ich habe gesehen, andere Websites haben "dies." Es ist schwer zu sagen. Es wäre hilfreich zu sehen, was Sie eigentlich erreichen wollen.
InformationsquelleAutor Jens Törnell | 2013-09-17
  1. 8

    Beispiel

    Versuchen Sie diesen Html -

    <a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

    - und Css -

    #a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}
    • Siehe quirksmode.org/css/selectors/target.html (scheint zu sein, CSS2, obwohl zu sehen, caniuse.com/#feat=css-sel3 zuerst dachte ich, es war der CSS3-nur - vielleicht haben Sie augmented es bei CSS3)
    • vielen Dank - in Verbindung mit :hover auf jsfiddle.net/birbilis/23nt74se - mit einem kleinen Unterschied, ich habe gerade den Anker zu springen, um sich für die einfachere Wartung des IDs und Ziele)
    • ...und Wartung-free CSS beim hinzufügen mehrerer Ziele (es erreichen, wenn der Anker sein, bevor das div, aber auch andere CSS-Selektoren als + könnte wahrscheinlich verwendet werden)
    • und eine andere Variante, die ich am Ende mit: jsfiddle.net/birbilis/s3kaknt9
    InformationsquelleAutor Love Trivedi
  2. 1

    ja, Sie können dies tun, nur mit css,erste creat < div > mit einer bestimmten Breite und Höhe und overflow auf hidden,dann legen Sie Ihre Sachen in dieser div neben einander

    <a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

    etwas wie oben;
    beachten Sie, dass Sie können diese verwenden html/css, wenn Sie eine Konstante Höhe,die Höhe der Sachen, sollten gleich sein.

    InformationsquelleAutor Shirin Abdolahi
Schreibe einen Kommentar