172 lines
4.0 KiB
HTML
172 lines
4.0 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>tabs切换</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
}
|
||
|
||
.title li {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.title .active {
|
||
color: red;
|
||
}
|
||
|
||
.content li {
|
||
display: none;
|
||
}
|
||
|
||
.content .active {
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<ul class="title"></ul>
|
||
<ul class="content"></ul>
|
||
</body>
|
||
<script>
|
||
|
||
// 数据从哪来的？
|
||
// 通过ajax请求（网络）从后端的数据库里面获取到的
|
||
|
||
var tabsList = [
|
||
{
|
||
title: '社会',
|
||
content: [
|
||
{
|
||
title: '社会新闻1',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '娱乐',
|
||
content: [
|
||
{
|
||
title: '娱乐新闻1',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
{
|
||
title: '娱乐新闻2',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '体育',
|
||
content: [
|
||
{
|
||
title: '体育新闻1',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '军事',
|
||
content: [
|
||
{
|
||
title: '军事新闻1',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
{
|
||
title: '军事新闻2',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
{
|
||
title: '军事新闻3',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '科技',
|
||
content: [
|
||
{
|
||
title: '科技新闻1',
|
||
time: '2023',
|
||
text: '主体内容部分'
|
||
}
|
||
]
|
||
},
|
||
]
|
||
|
||
// 渲染 tabs 标题部分
|
||
function renderTitle() {
|
||
tabsList.forEach((v, i) => {
|
||
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
|
||
$(".content").innerHTML +=
|
||
`<li class="${i == 0 ? 'active' : ''}">
|
||
${
|
||
v.content.length == 0
|
||
? '<p>暂无数据</p>'
|
||
: v.content.map(v => {
|
||
return `<p>${v.title}</p>`
|
||
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</li>`
|
||
});
|
||
bindTitleClick()
|
||
}
|
||
|
||
// 给标题 绑定点击事件
|
||
function bindTitleClick() {
|
||
_(".title li").forEach((v, i) => {
|
||
v.onclick = () => {
|
||
_(".title li").forEach((val, index) => {
|
||
val.className = ""
|
||
_(".content li")[index].className = ""
|
||
})
|
||
v.className = "active"
|
||
_(".content li")[i].className = "active"
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
renderTitle()
|
||
|
||
// var a = [1,24,6,2,8,5,9].forEach(v => {
|
||
// console.log(v);
|
||
// })
|
||
|
||
// var a = [1,24,6,2,8,5,9].map(v => {
|
||
// return `<p>${v}</p>`
|
||
// })
|
||
|
||
// console.log(a.toString().replaceAll(",", ""));
|
||
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
</script>
|
||
|
||
</html> |