CSS implementiert einen einfachen Tab-Wechseleffekt (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Realisierung eines einfachen Tab-Wechseleffekts mit CSS (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Mit der Idee der Ankerpunkte können Sie einen einfachen Tab-Switching-Effekt erzielen.

Seitenlayout und -stil:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
</div> 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

Der Container wird mit overflow:hidden festgelegt und die Höhe jeder Liste entspricht der Höhe des Containers, sodass immer nur eine Liste vorhanden ist angezeigt. Wenn wir auf eine Schaltfläche klicken, beispielsweise auf die dritte Schaltfläche, wird die Ankerkette der URL-Adresse in #drei geändert, wodurch die Ankerpositionierung der dritten Liste mit der ID drei ausgelöst wird, d. h. die Scrollhöhe des Containers geändert wird um den oberen Rand der Liste 3 an den oberen Rand des Scroll-Containers auszurichten, um einen Tabulatoreffekt zu erzielen.

Diese Methode weist jedoch bestimmte Mängel auf:

• Erstens muss die Behälterhöhe festgelegt werden;

• Zweitens löst die Positionierung des Ankerpunkts eine Neupositionierung des Formulars aus, d. h. wenn die Seite gescrollt werden kann, springt auch die Seite mit den Klickoptionen

Um diese Situation zu ändern, verwenden Sie die folgende Methode. Das Seitenlayout ist:

<div>
    <div>
<input>1</div>
    <div>
<input>2</div>
    <div>
<input>3</div>
    <div>
<input>4</div>
</div>
<div>
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
</div>

So geschrieben, selbst wenn das Seitenformular Bildlaufleisten hat, wird in den meisten Fällen kein Springen auftreten. Das Prinzip besteht darin, in jede Liste ein unsichtbares <input>-Eingabefeld einzufügen, dann wird die Tabulatorschaltfläche zu einem <label></label>-Element und wird über das for-Attribut mit dem <input> des id-Eingabefelds verknüpft. Auf diese Weise wird durch Klicken auf die Optionsschaltfläche das Fokusverhalten des Eingabefelds ausgelöst, die Positionierung des Ankerpunkts ausgelöst und der Effekt des Tabulatorwechsels erzielt.

Allerdings kann die oben genannte Technologie nicht in tatsächlichen Projekten ohne die Unterstützung von JavaScript verwendet werden. Zum einen ist dies der Auswahleffekt der Tab-Schaltfläche, zum anderen springen einige Bereiche der Verarbeitungsliste immer noch, wenn dies der Fall ist außerhalb des Browserproblems.
Die relevante Verarbeitung ähnelt der folgenden unter Verwendung der jQuery-Syntax:

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滚动数值
});

Das obige ist der detaillierte Inhalt vonCSS implementiert einen einfachen Tab-Wechseleffekt (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!