Question

我有一个简单的链接，如下：

<a href="page2.html">Go to Page 2</a>

我想这样，当点击这个按钮时，它会转到页面并运行一个jQuery函数，如下所示：

$("#object-selector div").hover(
    function () {
        $(this).animate({borderTopColor: '#fdcc06', borderRightColor: '#fdcc06', borderBottomColor: '#fdcc06', borderLeftColor: '#fdcc06'}, 200).children().animate({backgroundColor: '#fed944', color: '#351e00'}, 200);
    }, 
    function () {
        $(this).animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF'}, 200).children().animate({backgroundColor: '#af081f', color: '#FFF'}, 200);
    }
);

但是，如果在没有单击链接的情况下将页面导航到，则不应执行该功能。有办法吗？

Answer 1

如果您想在客户端进行所有操作，可以在网址上添加哈希值

<a href="page2.html#hover">Go to Page 2</a>

然后使用以下代码

<script>
if(window.location.hash === '#hover') {
    $(function() {
        $("#object-selector div").hover( ... , ... );
    });
}
</script>

Answer 2

也许有一种方法可以通过PHP实现这一目标。通过将您的href更改为此

<a href="page2.html?click=1">Go to Page 2</a>

然后在您的网页上加上以下内容：

<?php
if ($_GET['click']){

echo "<script type=\"text/javascript\">";
echo "
$(\"#object-selector div\").hover(
    function () {
        $(this).animate({borderTopColor: '#fdcc06', borderRightColor: '#fdcc06', borderBottomColor: '#fdcc06', borderLeftColor: '#fdcc06'}, 200).children().animate({backgroundColor: '#fed944', color: '#351e00'}, 200);
    }, 
    function () {
        $(this).animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF'}, 200).children().animate({backgroundColor: '#af081f', color: '#FFF'}, 200);
    }
);
";
echo "</script>";
}
?>

请注意，这仅适用于安装了PHP的服务器，而不适用于本地计算机。

当且仅当通过特定超链接访问页面时，如何在页面加载时执行jQuery函数？

2 个答案: