Javascript jQuery-在页面加载时执行函数？

我想在加载页面时在导航栏上添加一个类

以下是我的尝试：

$(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>

；

您放置在其中的所有内容

$(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请求获取所有这些页面，然后为每个响应大量添加和删除所选类。

这不是

load

方法的正确用法

.load（url[，数据][，完成（responseText，textStatus，XMLHttpRequest）]）

---

这是另一个函数的正确语法。但是用法仍然是错误的。@AnthonyGrist是的，

加载

事件。@ChristianNikkanen是的，我错过了一个

{

after函数。因此，如果我理解正确，这会通过ajax将新内容加载到一个div？很好，我实际上已经尝试实现了这一点。

$(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)
  })

});