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