當且僅當通過特定的超鏈接訪問頁面時，如何在頁面加載時執行jQuery函數？

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

如果要在客戶端全部執行此操作，則可以將哈希附加到URL

<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的服務器，而不適用於您的本地計算機。