How to switch the content data on the right when the left navigation bar is clicked, html, js, first and second menus can be used

Code Diary (4):
How to switch the content data on the right side when the left navigation bar is clicked
First look at the rendering: Please add a picture description
Please add a picture description
different switching can be achieved when clicked

First of all, add this js and use it directly without downloading.
If you don't understand, just ask.

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

Take a look at the code below:
Please add a picture description
2. Add data-src=" " in the place where you need to click to switch (note: I wrote div block navigation, some are li, which does not affect), and write the html you want to jump to inside .

Then:
Please add a picture description
3.ok, now, add the iframe tag where you want to add, and note that the src must be empty (see the picture, I marked it), because I don’t know which page value to get.

Ok, if it is finished, continue with the js code:
first look at the picture to understand: Please add a picture description
4. If you can understand the method, click on the first block through the front navigation bar, and the array will return to the first page, and then pass the src to the iframe tag, then can achieve

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

I won’t put all the codes, I’ll try typing it myself, if I don’t know, I can ask.

Link: https://pan.baidu.com/s/1sJQmTMXSBZEH-ADtZqLVVQ?pwd=3mov
Extraction code: 3mov

Guess you like

Origin blog.csdn.net/m0_62996549/article/details/130693899