"Weiter"-Button

[Tidus9]

Und zwar möchte ich eine einfache HTML Seite machen, wo es mir möglich ist über einen "weiter" Button 100 Sprüche nacheinander anzeigen zu lassen.

Also ich drück auf weiter: 1. Text / Spruch erscheint, drück auf weiter, 1. Spruch verschwindet und der 2. erscheint usw.

Klar, das ginge problemlos mit 100 HTML Dateien, aber ich würds mir schon gerne einfacher machen

Hat jemand einen Tipp?

 

[kbot]

also mit reinem HTML wirst du das nicht hinkriegen, dafür müsstest du schon mind. Javascript nutzen (gibt ja genug kostenlose Sachen im Netz)

Tipp: du brauchst nur ein Script, welches die CSS-Eigenschaft "visibility:" ändert

 

[theHacker]

Besser noch, dass die Inhalte direkt im JavaScript stehen, dann is der DOM-Tree nicht so überladen. 99% des Inhalts auszublenden, halte ich nicht für performant.

Btw. @kbot: nicht visibility, sondern display!
visibility blockt zusätzlich den Platz, d.h. ist der 100.ste Spruch aktiv und die anderen nicht, musst du trotzdem zig Bildschirme runterscrollen, weil der Rest der Seite leer is.

 

[tleilax]

Nur für den Spass an der Freude:

Das ginge mit reinem HTML und CSS3, wenn man damit leben kann, dass der erste Eintrag der letzte in der Liste ist. Diese Struktur muss halt sein, da man diesen sonst nicht vernünftig ausblenden kann.

<style>
.quotes > .quote:target, .quotes > .quote:last-child {
  display: block;
}
.quotes > .quote, .quotes > .quote:target ~ .quote:last-child {
    display: none;
}
</style>

<ul class="quotes">
    <li class="quote" id="step1">
        <p>#2</p>
        <a href="#step2">Weiter</a>
    </li>
    <li class="quote" id="step2">
      <p>#3</p>
      <a href="#step3">Weiter</a>
    </li>
    <li class="quote">
        <p>#1</p>
        <a href="#step1">Weiter</a>
    </li>
</ul>

https://jsfiddle.net/asL9s/