JavaScript implementiert die linke Navigationsleiste und den Seitensprung nach rechts

Im Webdesign ist die Navigationsleiste eine der wichtigen Komponenten der Seite. Sie kann Benutzern effektiv dabei helfen, die benötigten Funktionsseiten zu finden. Zu den gängigen Navigationsleisten gehören die obere Navigation und die linke Navigation. Im Interaktionsdesign erfordert die Implementierung von Navigationsleisten und Seitensprüngen den Einsatz einiger JavaScript-Techniken.

In diesem Artikel wird erläutert, wie Sie mit Javascript die linke Navigationsleiste implementieren und mit dem rechten Seitensprung zusammenarbeiten. Ich hoffe, dass er für Anfänger hilfreich ist.

1. Schnittstellenlayout

Zunächst müssen wir das Layoutdesign der Navigationsleiste festlegen. In diesem Beispiel stellen wir die linke Seite in Form einer Baumstruktur dar, und die ausgewählte Schriftart ist Microsoft Yahei, die Farbe ist #333 und der rechte Seitenblock verwendet einen weißen Hintergrund mit schwarzen Schriftarten . Gestalten Sie die gesamte Seite einfach und schön. Der Baumstrukturcode lautet wie folgt:

<ul class="tree">
    <li>
        <span>导航1</span>
        <ul>
            <li><a href="#">子导航1</a></li>
            <li><a href="#">子导航2</a></li>
        </ul>
    </li>    
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>

Der rechte Seitenblockcode lautet wie folgt:

<div class="content">
    <div class="title">标题</div>
    <div class="page">内容</div>
</div>

2. Stileinstellung

Nachdem das Layoutdesign festgelegt wurde, muss der Stil festgelegt werden. In diesem Beispiel legen wir CSS-Stile für Elemente fest, um die Seite schöner aussehen zu lassen. Für die Navigationsleiste müssen wir die Stile von ul, li, span, a und anderen Elementen festlegen. Der Code lautet wie folgt:

.tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tree li {
    margin-bottom: 3px;
}
.tree span, .tree a {
    display: block;
    padding: 5px;
    text-decoration: none;
}
.tree ul {
    margin: 0 0 0 20px;
}
.tree ul li {
    margin-bottom: 0;
}

Für den rechten Seitenblock müssen wir die Stile von Rändern, Schriftarten und anderen festlegen Der Code lautet wie folgt:

.content {
    margin: 20px;
    background-color: #fff;
}
.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.page {
    font-size: 14px;
    line-height: 1.5;
}

3. Javascript-Code

Für die linke Navigationsleiste müssen wir erkennen, dass nach dem Klicken zum Auswählen eines Elements die rechte Seite zur entsprechenden Seite springt und eine Stilmarkierung hinzufügt zur ausgewählten Navigationsleiste. Der Implementierungscode lautet wie folgt:

// 获取左侧导航栏中的所有LI元素，以及右侧页面的所有内容块
let liList = document.querySelectorAll('.tree li');
let contentList = document.querySelectorAll('.content .page');

// 为每个导航栏的a标签添加点击事件
liList.forEach(function (li, index) {
    let a = li.querySelector('a');
    a.addEventListener('click', function (e) {
        // 阻止a标签默认跳转事件
        e.preventDefault();

        // 遍历所有导航栏，将选中项样式设置为active，其他取消。
        liList.forEach(function (li) {
            li.classList.remove('active');
        });
        li.classList.add('active');

        // 遍历所有页面块，只显示选中项的页面块，其他隐藏。
        contentList.forEach(function (content) {
            content.style.display = 'none';
        });
        contentList[index].style.display = 'block';
    });
});

Wir speichern den Code als js-Datei und importieren ihn dann in die Seite, um eine reaktionsfähige Navigationsleiste zu implementieren, die linke Navigationsleiste und den rechten Seitensprung zu realisieren.

An diesem Punkt haben wir den Codeteil dieses Beispiels abgeschlossen. Durch dieses einfache Beispiel glaube ich, dass die Leser ein grundlegendes Verständnis dafür haben, wie man JavaScript verwendet, um reaktionsfähige Navigationsleisten und Seitensprünge auf der rechten Seite zu implementieren, und es auch flexibel im zukünftigen Webdesign verwenden können.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die linke Navigationsleiste und den Seitensprung nach rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!