jQuery - 在頁面加載時執行一個函數？

Question

我想在加載頁面時在導航欄上添加一個類。

這是我的嘗試：

$(document).ready(function(){

    $('index.php').load(function(){
        $("#etusivu").addClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('quartz.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").addClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('raikastimet.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").addClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('sisusta.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").addClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('teipit.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").addClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('vaimennusmatot.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").addClass("selected");
    });

});

因此，當用戶單擊導航上的鏈接並且瀏覽器加載新頁面時，我正在嘗試添加class="selected" 。 但這不起作用。

這是導航：

<ul id="navigation">';
        <li id="etusivu"><a href="index.php">Etusivu</a></li>
        <li id="quartz"><a href="quartz.php">Quartz-kalvot</a></li>
        <li id="raikastimet"><a href="raikastimet.php">Raikastimet</a></li>
        <li id="sisusta"><a href="sisusta.php">Sisusta</a></li>
        <li id="teipit"><a href="teipit.php">Teipit</a></li>
        <li id="vaimennusmatot"><a href="vaimennusmatot.php">Vaimennusmatot</a></li>
</ul>

Answer 1

這不是load方法的正確用法。

.load（url [，data] [，complete（responseText，textStatus，XMLHttpRequest）]）

$(document).ready(function(){

  $('#navigation a').click(function(event) {
     event.preventDefault(); // prevents the default action of the event
     $(this).parent().addClass('selected').siblings().removeClass('selected');
     var url = this.href;
     $('#whereToLoad').load(url)
  })

});

• 加載（）
• sublings（）
• 父（）
• event.preventDefault（）

Answer 2

你放在里面的一切

$(document).ready(function(){

    ...

});

...將在DOMReady中立即執行包含該段代碼的每個文檔。 如果要在此時更改選定的類，可以執行以下操作：

$('#navigation .selected').removeClass('selected'); // remove 'selected' class from all li's that have it
$('#id-of-current-page').addClass('selected');

現在，要找出當前元素，您可以檢查location.href 。 但是，看到你正在使用PHP，我真的建議只在渲染的HTML中添加選定的類開始。

您的代碼目前所做的是在頁面加載時立即通過AJAX請求獲取所有這些頁面，然后為每個響應添加和刪除所選的類。