1

我有一个基于单个页面顶部的网站，可以动态更改其内容。内容的容器是一个带有一些 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>

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

非常感谢！

4

6 回答 6

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>';
    }
?>
于 2013-10-30T15:07:28.023 回答
0

你缺少几个''

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

甚至精确

<script type="text/javascript">
    $(document).ready(function() {
        $('nav[class="main"]').removeClass("animated");
    });
</script>
于 2013-10-30T14:53:45.563 回答
0

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

$("导航")

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

于 2013-10-30T14:53:53.710 回答
0

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

如果您想防止在页面刷新后动画化，

您可以在字符串中添加一个参数 - 即 /?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");
});
于 2013-10-30T14:56:48.737 回答
0

您可以使用网络存储。

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

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

<script>
    if(localStorage.getItem("ClassRemoved") !== "true") {
         // remove the class
         localStorage.setItem("ClassRemoved", "true");
    }
</script>
于 2013-10-30T14:57:21.657 回答
0

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

于 2013-10-30T15:11:49.123 回答