163 lines
3.6 KiB
HTML
163 lines
3.6 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>
|
|
.qq {
|
|
list-style: none;
|
|
display: flex;
|
|
}
|
|
|
|
ul li{
|
|
margin-left: 20px;
|
|
list-style: none;
|
|
}
|
|
.qq1 li{
|
|
display: none;
|
|
}
|
|
.qqq{
|
|
color: red;
|
|
}
|
|
.qw{
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<ul class="qq">
|
|
|
|
</ul>
|
|
<ul class="qq1">
|
|
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
let ddd = [
|
|
{
|
|
id: 1,
|
|
name: "社会",
|
|
date: [
|
|
{
|
|
tes: "社会 地方地方",
|
|
},
|
|
{
|
|
tes: "社会 地方地方",
|
|
},
|
|
{
|
|
tes: "社会 地方地方",
|
|
},
|
|
{
|
|
tes: "社会 地方地方",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "民主",
|
|
date: [
|
|
{
|
|
tes: "民主 地方地方",
|
|
},
|
|
{
|
|
tes: "民主 地方地方",
|
|
},
|
|
{
|
|
tes: "民主 地方地方",
|
|
},
|
|
{
|
|
tes: "民主 地方地方",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "文明",
|
|
date: [
|
|
{
|
|
tes: "文明 地方地方",
|
|
},
|
|
{
|
|
tes: "文明 地方地方",
|
|
},
|
|
{
|
|
tes: "文明 地方地方",
|
|
},
|
|
{
|
|
tes: "文明 地方地方",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "和谐",
|
|
date: [
|
|
{
|
|
tes: "和谐 地方地方",
|
|
},
|
|
{
|
|
tes: "和谐 地方地方",
|
|
},
|
|
{
|
|
tes: "和谐 地方地方",
|
|
},
|
|
{
|
|
tes: "和谐 地方地方",
|
|
}
|
|
]
|
|
}
|
|
]
|
|
Array.prototype.tt=function(wws){
|
|
let sss=[]
|
|
for(let i=0;i<this.length;i++){
|
|
sss.push(wws(this[i],i,this))
|
|
console.log(wws(this[i],i,this))
|
|
}
|
|
return sss.toString().replaceAll(",", "");
|
|
}
|
|
|
|
console.log(ddd)
|
|
function $(name) {
|
|
return document.querySelector(name);
|
|
}
|
|
function _(name) {
|
|
return document.querySelectorAll(name);
|
|
}
|
|
let pp = $(".qq")
|
|
let pp1 = $(".qq1")
|
|
|
|
|
|
function sssd(){
|
|
ddd.forEach(function (v, i) {
|
|
pp.innerHTML += `<li class='${i==0?'qqq':''}'>${v.name}</li>`
|
|
pp1.innerHTML += `<li class='${i==0?'qw':''}'>${
|
|
console.log(v.date),
|
|
v.date.tt(function (aa) {
|
|
return `<p>${aa.tes}</p>`
|
|
})
|
|
}</li>`
|
|
})
|
|
}
|
|
sssd();
|
|
let dd=_(".qq li");
|
|
let dd1=_(".qq1 li");
|
|
dd.forEach(function(v,id){
|
|
v.onclick=function(){
|
|
dd1.forEach(function(s,i){
|
|
s.className="";
|
|
dd[i].className="";
|
|
})
|
|
dd1[id].className="qw";
|
|
v.className='qqq';
|
|
}
|
|
})
|
|
// pp.style.width="300px"
|
|
// pp.style.height="300px"
|
|
// pp.backgroundcolor="aqua"
|
|
</script>
|
|
|
|
</html> |