|
|
@@ -1,16 +1,18 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>猫眼电影</title>
|
|
|
<!-- 引入css文件 -->
|
|
|
- <link rel="stylesheet" href="./css/index.css">
|
|
|
+ <link rel="stylesheet" href="./css/index.css">
|
|
|
<!-- 引入图标字体 -->
|
|
|
- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_ek9b4zr8zlh.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_x4f20i1ljz9.css">
|
|
|
<!-- 引入rem js -->
|
|
|
- <script src="./js/rem.js"></script>
|
|
|
+ <script src="./js/rem.js"></script>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<!-- 头部区域 -->
|
|
|
@@ -25,7 +27,7 @@
|
|
|
<div class="address">
|
|
|
<span class="city">哈尔滨</span>
|
|
|
</div>
|
|
|
- <div class="nav wait">
|
|
|
+ <div class="nav hot">
|
|
|
<ul>
|
|
|
<li data-nav="hot">热映</li>
|
|
|
<li data-nav="cinema">影院</li>
|
|
|
@@ -36,7 +38,57 @@
|
|
|
<div class="search">
|
|
|
<i class="iconfont icon-search"></i>
|
|
|
</div>
|
|
|
- </nav>
|
|
|
+ </nav>
|
|
|
+ <!-- footer区域 -->
|
|
|
+ <footer>
|
|
|
+ <ul>
|
|
|
+ <li class="active">
|
|
|
+ <i class="iconfont icon-dianying"></i>
|
|
|
+ <span>电影/影院</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-shipin"></i>
|
|
|
+ <span>视频</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-yanchu"></i>
|
|
|
+ <span>演出</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-icon-my"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </footer>
|
|
|
</div>
|
|
|
+ <script>
|
|
|
+ // 获取导航栏元素
|
|
|
+ var navItems = document.querySelectorAll('.nav li');
|
|
|
+ var navBar = document.querySelector(".nav")
|
|
|
+ var footerItems = document.querySelectorAll("footer li");
|
|
|
+
|
|
|
+ // 遍历导航栏元素，添加点击事件监听器
|
|
|
+ for (var i = 0; i < navItems.length; i++) {
|
|
|
+ navItems[i].ontouchstart = function () {
|
|
|
+ // 获取当前按钮data-nav属性值
|
|
|
+ var navValue = this.dataset.nav;
|
|
|
+ navBar.className = "nav " + navValue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 遍历底部导航栏元素，添加点击事件监听器
|
|
|
+ for (var i = 0; i < footerItems.length; i++) {
|
|
|
+ // footerItems[i].index = i; // 给每个元素添加一个索引属性
|
|
|
+ footerItems[i].ontouchstart = function () {
|
|
|
+ // 移除所有元素的active类
|
|
|
+ for (var j = 0; j < footerItems.length; j++) {
|
|
|
+ footerItems[j].classList.remove("active");
|
|
|
+ }
|
|
|
+ // 给当前点击的元素添加active类
|
|
|
+ this.classList.add("active");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
