159 lines
5.3 KiB
HTML
159 lines
5.3 KiB
HTML
<!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> |