文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery -在页面加载时执行函数？

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

Stack Overflow用户

提问于 2012-09-11 15:56:58

回答 2查看 231关注 0票数 1

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

下面是我的尝试：

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

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-11 16:01:35

这不是load方法的正确用法。

.load( url，数据)

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

});

load()
sublings()
parent()
event.preventDefault()

票数 2

Stack Overflow用户

发布于 2012-09-11 16:01:09

你放在里面的所有东西

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12365212

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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