97 lines
2.8 KiB
HTML
97 lines
2.8 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>
|
||
.title {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
|
||
.title .active {
|
||
color: red;
|
||
}
|
||
|
||
.title li {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
|
||
.content .active {
|
||
display: block;
|
||
}
|
||
|
||
.content li {
|
||
margin-right: 30px;
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<ul class="title">
|
||
<li class="">推荐</li>
|
||
<li>电视剧</li>
|
||
<li>电影</li>
|
||
<li>综艺</li>
|
||
</ul>
|
||
<ul class="content">
|
||
<li class="">推荐内容</li>
|
||
<li>电视剧内容</li>
|
||
<li>电影内容</li>
|
||
<li>综艺内容</li>
|
||
</ul>
|
||
|
||
</body>
|
||
<script>
|
||
function $(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
var title_li = $('.title li')
|
||
var content_li = $('.content li')
|
||
// console.log(title_li);能打印出来所以获取节点成功
|
||
|
||
title_li.forEach(function (item, index) {
|
||
// console.log('内容',item, index);title_li里li标签的内容和下标都打印出来，所以获取节点成功
|
||
// 绑定点击事件
|
||
item.onclick = function () {
|
||
// console.log('e',e.target.className);
|
||
// 判断数组里面被点击的值是否具有激活态，如果有则去除该值和其包含的内容的激活态
|
||
if(item.className == 'active'){
|
||
item.className = ''
|
||
content_li[index].className = ''
|
||
|
||
}
|
||
// 除此之外，给点击的没有的加上激活态，方法采取以下内容
|
||
else{
|
||
// 先清楚所有值的激活态
|
||
title_li.forEach(function (A, a) {
|
||
// A已经就是title_li里面具体的值了
|
||
A.className = ''
|
||
// 数组＋下标可以取到数组里面具体的值，然后content_li是一个数组;
|
||
// 所以要想清楚里面li标签的类名，需要具体到某一个上值上，
|
||
// 加之title_li和content_li的下标是一致的，所以可以直接＋[a]
|
||
content_li[a].className = ''
|
||
})
|
||
// 再给具体被点击到的值加上激活态
|
||
item.className = 'active'
|
||
content_li[index].className = 'active'
|
||
|
||
}
|
||
|
||
// 同上，是加上激活态
|
||
}
|
||
|
||
|
||
})
|
||
</script>
|
||
|
||
</html> |