admin

10_移动端/练习6_猫眼电影.html

@@ -195,16 +195,42 @@
         // 为顶部tab绑定点击事件
         topTab.forEach((element) => {
             element.ontouchstart = function(){
-                // 1. 清除所有tab的active类名
-                topTab.forEach((item) => {
-                    item.classList.remove("active");
-                })
-                // 2. 给当前点击的tab添加active类名
-                this.classList.add("active");
-                // 3. 给当前点击的tab添加data-active属性
-                topTabContent.setAttribute('data-active', this.dataset.val);
+                let thisVal = this.dataset.val;
+                location.hash = thisVal;
+                changeTopTab(thisVal)
+                // // 1. 清除所有tab的active类名
+                // topTab.forEach((item) => {
+                //     item.classList.remove("active");
+                // })
+                // // 2. 给当前点击的tab添加active类名
+                // this.classList.add("active");
+                // // 3. 给当前点击的tab添加data-active属性
+                // topTabContent.setAttribute('data-active', thisVal);
+                // // 4. 向地址栏添加hash值
             }
         });
+
+
+        // 监听地址栏hash值的变化
+        window.onhashchange = function(){
+            let hash = location.hash.slice(1);
+            changeTopTab(hash);
+        }
+
+        // 切换topTab选中状态
+        function changeTopTab(val){
+            // 1.为topTab添加选中状态
+            topTab.forEach((element) => {
+                if(element.dataset.val == val){
+                    element.classList.add("active");
+                }else{
+                    element.classList.remove("active");
+                }
+            });
+            // 2.给topTabContent添加data-active属性
+            topTabContent.setAttribute('data-active', val);
+
+        }
     </script>
 </body>