189 lines
4.9 KiB
HTML
189 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body,ul,li,p,h1,h2,h3,h4,h5,h6{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
height: 45px;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.show_title {
|
|
color: red;
|
|
}
|
|
.content li {
|
|
display: none;
|
|
}
|
|
.show_content {
|
|
display: inline-block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="tabs">
|
|
<ul class="title"></ul>
|
|
<ul class="content">
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script>
|
|
|
|
var title = document.querySelector(".title");
|
|
var content = document.querySelector(".content");
|
|
|
|
var tabs = [
|
|
{
|
|
title: '推荐',
|
|
list: [
|
|
{
|
|
title: '推荐的内容1',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '推荐的内容2',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '推荐的内容2',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '推荐的内容2',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '推荐的内容2',
|
|
time: '2021-03-05'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '游戏',
|
|
list: [
|
|
{
|
|
title: '游戏的内容1',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '游戏的内容2',
|
|
time: '2021-03-05'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '热点1',
|
|
list: [
|
|
{
|
|
title: '热点的内容1',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '热点的内容2',
|
|
time: '2021-03-05'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '热点2',
|
|
list: [
|
|
{
|
|
title: '热点的内容1',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '热点的内容2',
|
|
time: '2021-03-05'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '热点3',
|
|
list: [
|
|
{
|
|
title: '热点的内容1',
|
|
time: '2021-03-05'
|
|
},
|
|
{
|
|
title: '热点的内容2',
|
|
time: '2021-03-05'
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
// 渲染标题的方法
|
|
function RenderTitle () {
|
|
tabs.forEach(function (v,i){
|
|
title.innerHTML += `<li class="${ i == 0 ? 'show_title' : '' }">${v.title}</li>`
|
|
})
|
|
}
|
|
|
|
// 渲染内容的方法
|
|
function RenderContent () {
|
|
// // 1 生成li
|
|
tabs.forEach(function (v,i){
|
|
content.innerHTML += `<li class="${ i == 0 ? 'show_content' : '' }"></li>`
|
|
});
|
|
|
|
// 2 生成p
|
|
var contentLi = document.querySelectorAll(".content li");
|
|
tabs.forEach(function (v,i) {
|
|
v.list.forEach(function (item,index) {
|
|
// console.log(item)
|
|
contentLi[i].innerHTML += `<p>${item.title}</p>`
|
|
})
|
|
});
|
|
|
|
// 换一种方法
|
|
// tabs.forEach(function (v,i){
|
|
// content.innerHTML += `<li class="${ i == 0 ? 'show_content' : '' }">${
|
|
// (v.list.map(function (item) {
|
|
// return `<p>${item.title}</p>`
|
|
// })).toString().replace(/,/g, "")
|
|
// }</li>`
|
|
// });
|
|
}
|
|
|
|
// 实现tabs切换
|
|
function changeTabs() {
|
|
// 获取标题的li标签数组
|
|
var title = document.querySelectorAll(".title li");
|
|
// 获取内容的li标签数组
|
|
var content = document.querySelectorAll(".content li");
|
|
|
|
// 遍历标题
|
|
title.forEach(function (val,index) {
|
|
// 标题的点击事件
|
|
val.onclick = function () {
|
|
// 清除上一次的标题和内容的样式
|
|
title.forEach(function (item,i) {
|
|
item.classList.remove("show_title")
|
|
content[i].classList.remove("show_content")
|
|
})
|
|
|
|
// 为你点击的标题li标签添加激活类名
|
|
val.classList.add("show_title");
|
|
content[index].classList.add("show_content");
|
|
}
|
|
});
|
|
}
|
|
|
|
RenderTitle();
|
|
RenderContent();
|
|
|
|
changeTabs()
|
|
|
|
</script>
|
|
</html> |