时间戳

首页 > 解决方案 > 多个 .html 页面上的持续动画

javascript - 多个 .html 页面上的持续动画

问题描述

我有一个惊人的导航栏设计（在我看来）。但是有一个问题！当我添加其他 .html 页面时，下一个 .html 页面上没有显示动画。我知道浏览器不记得之前页面上的活动，所以动画会重置......有没有办法可以在所有 4 个 .html 页面上应用动画？因此，当单击联系人时，它会滑动到联系人并保持联系，并且不会重置为默认的第一个？

<div class="main">
<a href="#about"><span class="menu m1">ABOUT</span>
<a href="#contact"><span class="menu m2">CONTACT</span>
<a href="#home"><span class="menu logo">
    <img src="TBGFXLOGO2019NBG.png" width="100px"/>
</span>
<a href="#portfolio"><span class="menu m3">PORTFOLIO</span>
<a href="#order"><span class="menu m4">ORDER</span>
<span class="active"/>


    body {
  margin: 0px;
  padding: 0px;
  background-color: #232323;
}

.main {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.menu {
  width: 100px;
  height: 30px;
  font-family: 'Stroud';
  font-size: 20px;
  color: white;
  padding: 0px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.active {
  width: 100px;
  height: 30px;
  background-color: white;
  position: absolute;
  top: 33px;
  left: 0px;
  transform: skewX(20deg);
  z-index: -1;
  transition: all 0.3s ease-in;
}

.m1 {
  color: black;
}

.logo {
  position: relative;
  top: initial;
  margin: 0px 30px;
}

a {
  display: inline-block;
}   



$(document).ready(function(){
        $(".m1").click(function(){
            $(".m1").css({'color':'black'});
            $(".m2, .m3, .m4").css({'color':'white'});
            $(".active").css({'left':'0px','transform':'skewX(20deg)'});
        });
        $(".m2").click(function(){
            $(".m2").css({'color':'black'});
            $(".m1, .m3, .m4").css({'color':'white'});
            $(".active").css({'left':'100px','transform':'skewX(20deg)'});
        });
        $(".m3").click(function(){
            $(".m3").css({'color':'black'});
            $(".m1, .m2, .m4").css({'color':'white'});
            $(".active").css({'left':'359px','transform':'skewX(-20deg)'});
        });
        $(".m4").click(function(){
            $(".m4").css({'color':'black'});
            $(".m1, .m2, .m3").css({'color':'white'});
            $(".active").css({'left':'461px','transform':'skewX(-20deg)'});
        });
    });

标签： javascripthtmlcssanimation

解决方案

单击链接后，您应该从您的网址获取#hash。与在您的 JS 中相比，您将哈希与菜单项进行比较。当这两个相同时，将类添加到菜单项，如 active 左右，并为 active 类提供您想要的任何动画。

//TO GET THE HASH VIA JS
$(".main a").click(function(event){
event.preventDefault();
var hash = window.location.hash;
$(".main a").each(function(){
 var curr = $(this);
if (hash == $(this).attr("href")) {
   $("span", curr).addClass("active");
 }})
}

推荐阅读