左側のナビゲーションバーをクリックしたときに右側のコンテンツデータを切り替える方法、html、js、第1メニューと第2メニューが使用可能

コード日記 (4):
左側のナビゲーション バーをクリックしたときに右側のコンテンツ データを切り替える方法
まずはレンダリングを見てください:

クリックすると別の切り替えが実現できます

まず、このjsを追加して、ダウンロードせずに直接使用します。
わからない場合は、聞いてください。

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

以下のコードを見てください。

2. クリックして切り替える必要がある場所に data-src=" " を追加し (注: div ブロック ナビゲーションを書きましたが、一部は li であり、影響しません)、html を書きます。の内側にジャンプしたいとします。

3.

[OK] で、追加したい場所に iframe タグを追加します。どのページ値を取得すればよいかわからないため、src は空でなければならないことに注意してください (図を参照してください。マークを付けました)。

それが終わったら、js コードを続けます。
まず、図を見て理解してください。
4. メソッドが理解できると思います。フロント ナビゲーション バーで最初のブロックをクリックすると、配列が最初のページに戻ります。 srcをiframeタグに渡すと、次のことが実現できます

<script>


    let arr = ['G-right-film.html', 'G-right-TYplay.html', 'G-right-Anime.html']
    //获取iframe标签
    let iframe = document.querySelector('#iframe')
    //获取导航栏按钮
    let lis = document.querySelectorAll('div')
    //点击导航栏，改变Iframe的src属性，实现页面切换
    for (let i = 0; i < lis.length; i++) {
    
    
        //绑定点击事件
        lis[i].onclick = function (event) {
    
    

            iframe.src = event.target.dataset.src
        }

    }
</script>

すべてのコードは載せません。自分で入力してみます。分からない場合は質問してください。

リンク: https://pan.baidu.com/s/1sJQmTMXSBZEH-ADtZqLVVQ?pwd=3mov
抽出コード: 3mov