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

47
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/1.0/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!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>
</head>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.tltle{
display: flex;
}
.tltle li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
<body>
<ul class="tltle">
<li class="col">公告</li>
<li>规则</li>
<li>安全</li>
<li>公益</li>
</ul>
<ul class="content">
<li class="active">公告的内容</li>
<li>规则的内容</li>
<li>安全的内容</li>
<li>公益的内容</li>
</ul>
</body>
<script src="./index.js"></script>
</html>

17
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/1.0/index.js Normal file
View File

@@ -0,0 +1,17 @@
var tltle1 = document.querySelectorAll(".tltle li")//获取所有tltle 里的li标签
console.log(tltle1)//打印所有li标签
tltle1.forEach(function (v,i) {//循环函数 (这个v和i的概念)
v.onclick = function () {//循环点击
tltle1.forEach(function (item,ac) {//循环清空函数名
item.className = ""
content1[ac].className = " "
})
v.className = "col"//添加函数名
console.log(content1[i]);//tltle1的数组对应content的下标
content1[i].className="active"
}
}
)
var content1 = document.querySelectorAll(".content li")//获取所有content 里的li标签

44
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/2.0/imdex.html Normal file
View File

@@ -0,0 +1,44 @@
<!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>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script src="./imdex.js"></script>
<script src="./test.js"></script>
</html>

88
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/2.0/imdex.js Normal file
View File

@@ -0,0 +1,88 @@
var data = [{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];
var currentIndex = 0
//(便利是什么意思)
function RenderTitle() { //渲染title
data.forEach( //循环
function(v, i) { //函数
document.querySelector(".title").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'col' : ''}">${v.title}</li>`; /*字符串 */
console.log(v)
document.querySelector(".content").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'active' : ''}"></li>`; /*字符串 */
}
)
var tltle1 = document.querySelectorAll(".title li")
var content1 = document.querySelectorAll(".content li")
tltle1.forEach(function(v, i) {
v.onclick = function() {
tltle1.forEach(function(item, ac) {
item.className = ""
content1[ac].className = " "
})
v.className = "col"
content1[i].className = "active"
currentIndex = i
RenderContent()
}
})
}
function RenderContent() {
var li = document.querySelectorAll(".content li")
li[currentIndex].innerHTML = ""
data[currentIndex].content.forEach(function(v) {
li[currentIndex].innerHTML += `<p>${v.text}</p>`
})
}
RenderTitle()
RenderContent() //这里为啥子加一个空方法

43
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/2.01/imdex.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script src="./imdex.js"></script>
</html>

45
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.11/2.01/imdex.js Normal file
View File

@@ -0,0 +1,45 @@
var data = [{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];