JavaScript は左側のナビゲーション バーと右側のページ ジャンプを実装します。

Web デザインにおいて、ナビゲーション バーはページの重要なコンポーネントの 1 つであり、ユーザーが必要な機能ページを効果的に見つけるのに役立ちます。一般的なナビゲーション バーには、上部ナビゲーションと左側のナビゲーションが含まれます。インタラクション デザインでは、ナビゲーション バーとページ ジャンプを実装するには、いくつかの JavaScript テクニックを使用する必要があります。

今回はJavaScriptを使用して左側のナビゲーションバーを実装し、右側のページジャンプと連携する方法を紹介しますので、初心者の方の参考になれば幸いです。

1. インターフェースのレイアウト

まず、ナビゲーション バーのレイアウト デザインを決定する必要があります。この例では、左側がツリー構造の形式で表示され、選択されたフォントは Microsoft Yahei、色は #333、背景色は #fff で、右側のページ ブロックは白の背景に黒のフォントが使用されています。 . ページ全体をシンプルかつ美しく仕上げます。ツリー構造のコードは次のとおりです:

<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>

右ページのブロックのコードは次のとおりです:

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

2. スタイルの設定

レイアウト デザインが決定したら、スタイルを設定します。を設定する必要があります。この例では、ページをより美しく見せるために要素に CSS スタイルを設定します。ナビゲーション バーの場合、ul、li、span、a およびその他の要素のスタイルを設定する必要があります。コードは次のとおりです。

.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;
}

右側のページ ブロックの場合、マージンのスタイルを設定する必要があります。

.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 コード

左側のナビゲーション バーでは、クリックして項目を選択すると、右側のページが表示されることを認識する必要があります。対応するページにジャンプし、選択したナビゲーション バーにスタイル マークを追加します。実装コードは次のとおりです。

// 获取左侧导航栏中的所有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';
    });
});

コードを js ファイルとして保存し、それをページにインポートして、応答性の高いナビゲーション バー、左側のナビゲーション バー、および右側のページ ジャンプを実現します。

この時点で、この例のコード部分が完了しました。この簡単な例を通じて、読者は JavaScript を使用して応答性の高いナビゲーション バーと右側のページ ジャンプを実装する方法の基本を理解し、将来の Web デザインにも柔軟に使用できると思います。

以上がJavaScript は左側のナビゲーション バーと右側のページ ジャンプを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。