So implementieren Sie ein Tab-Layout mit HTML und CSS-HTML-Tutorial-php.cn

So implementieren Sie ein Tab-Layout mit HTML und CSS

WBOY

Freigeben： 2023-10-19 10:05:03

Original

1002 Leute haben es durchsucht

So implementieren Sie ein Tab-Layout mit HTML und CSS

So verwenden Sie HTML und CSS, um das Tab-Layout zu implementieren. Das Tab-Layout ist eine gängige Seitenlayout-Methode. Es unterteilt die Seite in mehrere Tabs. Durch Wechseln der Tabs können verschiedene Tabs angezeigt werden . Inhalt. In diesem Artikel stellen wir die Verwendung von HTML und CSS zur Implementierung des Tab-Layouts vor und geben spezifische Codebeispiele.

HTML-Struktur erstellen

<li>Zuerst müssen wir eine HTML-Datei erstellen und die erforderlichen Tags und Inhalte definieren. Das Folgende ist ein Beispiel für eine HTML-Struktur:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签式布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <ul class="tabs">
            <li class="tab">标签1</li>
            <li class="tab">标签2</li>
            <li class="tab">标签3</li>
        </ul>
        <div class="content">
            <div class="tab-content">内容1</div>
            <div class="tab-content">内容2</div>
            <div class="tab-content">内容3</div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

In der obigen HTML-Struktur verwenden wir die Tags <ul> und <li>, um eine Navigationsleiste mit Registerkarten zu erstellen. Verwenden Sie <div>-Tags, um Tag-Inhalte zu umschließen. Verwenden Sie für jeden Tag-Inhalt das Tag <div> und fügen Sie einen entsprechenden Klassennamen hinzu.

CSS-Stile erstellen<ul>和<li>标签来创建标签导航栏，使用<div>标签来包裹标签内容。每个标签内容都使用<div>标签，并添加一个相应的类名。

<li>创建CSS样式

接下来，我们需要使用CSS来定义标签和内容的样式。以下是一个示例的CSS样式：

.container {
    width: 800px;
    margin: 0 auto;
}

.tabs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab {
    display: inline-block;
    padding: 10px 20px;
    background-color: lightgray;
    cursor: pointer;
}

.tab:hover {
    background-color: gray;
    color: white;
}

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid lightgray;
}

.content .tab-content:first-child {
    display: block;
}

Nach dem Login kopieren

在上面的CSS样式中，我们通过.container类来定义整个布局容器的样式。.tabs类定义了标签导航栏的样式，.tab类定义了每个标签的样式，.tab-content类定义了标签内容的样式。

在最后一行的样式中，我们使用了CSS选择器first-child来显示第一个标签内容，其他标签内容的display属性设置为none

window.addEventListener('load', function() {
    var tabs = document.querySelectorAll('.tab');
    var tabContents = document.querySelectorAll('.tab-content');

    for(var i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function() {
            var tabClass = this.getAttribute('class');

            for(var j = 0; j < tabContents.length; j++) {
                tabContents[j].style.display = 'none';
            }

            var contentId = '.' + tabClass + '-content';
            var content = document.querySelector(contentId);
            content.style.display = 'block';
        });
    }
});

Nach dem Login kopieren

.container

.tabs

.tab

.tab-content

In der letzten Stilzeile verwenden wir den CSS-Selektor first-child, um den ersten Tag-Inhalt anzuzeigen, und das display-Attribut anderer Tag-Inhalte wird auf none, um zunächst nur den Inhalt des ersten Tags anzuzeigen.

<li>Um die Tab-Wechselfunktion zu implementieren, müssen wir JavaScript verwenden, um das Klickereignis des Tabs zu verarbeiten. Das Folgende ist ein Beispiel für einen JavaScript-Code:

Im obigen JavaScript-Code rufen wir zunächst alle Tags und Inhaltselemente ab und binden dann über eine Schleife ein Klickereignis an jedes Tag. Wenn Sie auf ein Label klicken, werden zunächst alle Inhalte ausgeblendet. Anschließend wird der entsprechende Inhalt anhand des angeklickten Label-Klassennamens gefunden und angezeigt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Tab-Layout mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!