first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0616/案例三.html

@@ -0,0 +1,97 @@
+<!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>