Question

我有一个基于单个页面顶部的网站，可以动态更改其内容。内容的容器是一个带有一些javascript和css动画的div（我给了我的导航一个类“动画”），我想在第一次之后删除这个类（因此它不会再动画了）。

有没有办法删除（在第一页加载后）或添加（在第一页加载期间）这个类？我已经尝试过使用标准查询代码但是当我点击更改div容器内容的链接时，动画都会重新启动。这是我的HTML：

<nav class="main animated fadeInRight"><?php include('template/nav/main.php'); ?></nav>

我想用类似的东西删除动画类，但每个新页面加载。

<script type="text/javascript">
    $(document).ready(function() {
        $('nav').removeClass("animated");
    });
</script>

这不起作用，因为当我点击链接更改我的内容时，它还会重新加载页面并再次启动所有动画。

非常感谢！

Answer 1

如果不查看所有代码，很难说，但我可能会在导航链接的末尾添加一个URL参数。您提到点击链接更改您的内容也会重新加载您的页面，对吗？

好吧，在导航中的所有链接上，输入如下参数：

<a href="pageName.php?firstLoad=N">Page Name</a>

然后在您包含导航的所有页面的顶部：

<?php 
    if($_GET["firstLoad"] == "N") {  
        echo '<nav class="main fadeInRight">';
        include('template/nav/main.php');
        echo '</nav>';
    } 
    else {
        echo '<nav class="main animated fadeInRight">';
        include('template/nav/main.php');
        echo '</nav>';
    }
?>

Answer 2

你错过了几个''

<script type="text/javascript">
    $(document).ready(function() {
        $('nav').removeClass("animated");
    });
</script>

甚至是精确的

<script type="text/javascript">
    $(document).ready(function() {
        $('nav[class="main"]').removeClass("animated");
    });
</script>

Answer 3

您应该将导航器放在引号中，例如

$（ “NAV”）

否则它指向一个不存在的变量

Answer 4

每个页面重新加载都会重新启动您的应用。

如果您想在页面刷新后阻止动画制作动画，

你可以在你的字符串中添加一个参数 - 即/？animation = true

并在PHP文件中查找

<nav class="main <?php if($_GET['animation'] == true) {echo animated." ";} ?> fadeInRight"><?php include('template/nav/main.php'); ?></nav>

然后只删除所有其他链接。

除非我没有把你弄好，所以在这种情况下 - 只需在提供的脚本中解决你的拼写错误：

$().ready(function() {
    $("nav").removeClass("animated");
});

Answer 5

您可以使用网络存储。

首次加载页面时，您将从nav中删除该类，然后检查是否已删除该类。

当页面加载时，您可以执行以下操作：

<script>
    if(localStorage.getItem("ClassRemoved") !== "true") {
         // remove the class
         localStorage.setItem("ClassRemoved", "true");
    }
</script>

Answer 6

有许多解决方案，因为这是可能的。但this link可能会帮助您创建一个cookie，并根据其生命周期，您可能希望动画或不动画。

首次加载后从导航中删除类

6 个答案: