bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/tab栏切换高级版本.html Normal file
View File

@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
display: flex;
align-items: center;
justify-content: space-around;
}
.show_color {
color: red;
}
.b li {
display: none;
}
.show {
display: inline-block !important;
}
</style>
</head>
<body>
<div>
<ul class="a">
</ul>
<ul class="b">
</ul>
</div>
<script>
var arr = [
{
title: '推荐',
list: [
{
title: '推荐内容1',
time: '2021-3-6'
}, {
title: '推荐内容2',
time: '2021-3-6'
}, {
title: '推荐内容3',
time: '2021-3-6'
}
]
}, {
title: '游戏',
list: [
{
title: '游戏内容1',
time: '2021-3-6'
}, {
title: '游戏内容2',
time: '2021-3-6'
}, {
title: '游戏内容3',
time: '2021-3-6'
}
]
}, {
title: '电影',
list: [
{
title: '电影内容1',
time: '2021-3-6'
}, {
title: '电影内容2',
time: '2021-3-6'
}, {
title: '电影内容3',
time: '2021-3-6'
}
]
}
];
//渲染标题
// 1.获取值
let x=document.querySelector('.a');
let y=document.querySelector('.b');
// 用函数封装
function top1(){
// 2.遍历后端给的数据
arr.forEach(function(item,index){
// 3.使用模板字符串做拼接,用三目运算符做判断.把默认颜色给第一个.数组需要遍历,数组里面的对象可以通过.的方式调用
x.innerHTML+=`<li class='${index==0? 'show_color':''}'>${item.title}</li>`;
});
}
//渲染内容
// 函数封装
function con(){
// 再次遍历后端给的数组
arr.forEach(function(i,j){
// 使用模板字符串渲染进去内容页,中间内容在嵌套一层
y.innerHTML+=`<li class='${j==0? 'show':''}'>${
(i.list.map(function(a,b){
return `<p>${a.title}</p>`
})).join('')
}</li>`;
});
}
top1();
con();
let xx=document.querySelectorAll('.a li');
let yy=document.querySelectorAll('.b li');
xx.forEach(function(item,index){
item.onclick=function(){
xx.forEach(function(i,j){
i.className='';
yy[j].className='';
})
item.className='show_color';
yy[index].className='show';
}
});
// 思路:步骤一
// 1.获取标题的值
// 2.后端给的是数组,我们遍历一遍,又因为里面是对象,我们可以打点通过.title去获取到标题的值
// 3.使用模板字符串和innerHtml追加给我们获取到的标题的值,这样标题不在是空标签了,我们把值放进去了
// 步骤二
// 1.获取内容的值
// 2.我们再去遍历一遍后端给的数组,在使用模板字符串,里面还要在嵌套一层,还要循环一次:
// 第一次遍历是遍历整个数组,里面是对象,通过.list拿到内容,里面又是数组,我们还要循环遍历一遍,最终通过.title拿到内容
// 3.通过俩次遍历和打点我们拿到内容,此时追加给内容,注意不要追加错了,步骤一是追加给标题,步骤二是追加给内容
// 步骤三
// 1.分别获取标题和内容的值,此时的标题和内容不在是空的ul了,标题里面追加了li,内容里面追加了li,还嵌套了p,此时要用querySelectorAll
// 2.给标题注册点击事件,点那个标题就通过classname把值给谁,但在之前我们要先清除所有的标题里面的classname的值,先清除在通过点击事件给谁赋classname
// 3.这里有个骚操作,内容的索引和标题的索引其实是一一相对应的,querySelectorAll获取的是一个数组,(--内容数组[标题下标]--),
// 当我们通过点击事件点击第一个标题,拿到索引0,这个标题的索引0也对应这内容索引0,刚开始内容全部都是隐藏,拿到索引后,通过classname让其显示,当然刚开始要和上面一样全部清除classname值
</script>
</body>
</html>