|
|
@@ -68,6 +68,7 @@
|
|
|
}
|
|
|
nav .nav-btn{
|
|
|
font-size: .3rem;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
nav .nav-btn ul{
|
|
|
display: flex;
|
|
|
@@ -76,6 +77,17 @@
|
|
|
width: 11vw;
|
|
|
line-height: .8rem;
|
|
|
text-align: center;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ nav .nav-btn .line{
|
|
|
+ width: 6vw;
|
|
|
+ height: 4px;
|
|
|
+ background-color: #e54847;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-radius: 1px;
|
|
|
+ transition: all .1s linear;
|
|
|
}
|
|
|
nav .search{
|
|
|
font-size: .3rem;
|
|
|
@@ -86,7 +98,22 @@
|
|
|
nav .search .iconfont{
|
|
|
font-size: .4rem;
|
|
|
color: #ef4238;
|
|
|
-
|
|
|
+ }
|
|
|
+ nav .movie [data-tab="movie"],
|
|
|
+ nav .cinema [data-tab="cinema"],
|
|
|
+ nav .coming [data-tab="coming"]{
|
|
|
+ color: #111;
|
|
|
+ font-size: .35rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ nav .movie .line{
|
|
|
+ left: 2vw;
|
|
|
+ }
|
|
|
+ nav .cinema .line{
|
|
|
+ left: 13vw;
|
|
|
+ }
|
|
|
+ nav .coming .line{
|
|
|
+ left: 25vw;
|
|
|
}
|
|
|
/* 导航部分 end */
|
|
|
</style>
|
|
|
@@ -105,11 +132,11 @@
|
|
|
<span>哈尔滨</span>
|
|
|
<i class="arr-btn"></i>
|
|
|
</div>
|
|
|
- <div class="nav-btn">
|
|
|
+ <div class="nav-btn movie">
|
|
|
<ul>
|
|
|
- <li>热映</li>
|
|
|
- <li>影院</li>
|
|
|
- <li>待映</li>
|
|
|
+ <li data-tab="movie">热映</li>
|
|
|
+ <li data-tab="cinema">影院</li>
|
|
|
+ <li data-tab="coming">待映</li>
|
|
|
</ul>
|
|
|
<div class="line"></div>
|
|
|
</div>
|
|
|
@@ -120,5 +147,24 @@
|
|
|
</div>
|
|
|
<!-- 引入rem.js文件 动态设置html字体大小 -->
|
|
|
<script src="./rem.js"></script>
|
|
|
+ <script>
|
|
|
+ // 获取元素
|
|
|
+ var aNavBtn = document.querySelectorAll(".nav-btn li");
|
|
|
+ var oNavBtn = document.querySelector(".nav-btn");
|
|
|
+ // 为顶部导航添加点击事件
|
|
|
+ for(var i=0;i<aNavBtn.length;i++){
|
|
|
+ aNavBtn[i].ontouchstart = function(){
|
|
|
+ // 获取当前按钮dataset-tab值
|
|
|
+ var tab = this.dataset.tab;
|
|
|
+ // 切换类名
|
|
|
+ // oNavBtn.classList.remove("movie");
|
|
|
+ // oNavBtn.classList.remove("cinema");
|
|
|
+ // oNavBtn.classList.remove("coming");
|
|
|
+ // oNavBtn.classList.add(tab);
|
|
|
+ oNavBtn.className ="nav-btn " + tab;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
