加载目标页面时，主导航项上的 Javascript 更改 div 类答案

【问题标题】：Javascript on main navigation item to change div class when destination page is loaded加载目标页面时，主导航项上的 Javascript 更改 div 类
【发布时间】：2012-11-02 09:54:52
【问题描述】：

我正在我的一个主要导航链接上应用一个函数，这个函数看起来像这样

    $(function() {
       $('#menu-item-1137').click(function(){
           $('#waterfacts').attr('class', 'active');
           $('li#simple2Tab').attr('class','active');    
       });  
    });

所以我的目标很简单，当单击该项目时，将这些类更改应用于 id 元素。

我面临的问题是，当您已经在目标页面上时，该功能可以工作，但假设我在网站的索引上，然后我点击 #menu-item 该功能将无法工作，因为我认为它是试图应用到我当前正在查看的页面。

所以我的问题是，我该如何告诉函数先等到页面加载然后运行？

提前致谢。

【问题讨论】：

标签： javascript attr

【解决方案1】：

尝试使用.ready()，并在其中使用.on() 将函数绑定到元素。

这将使该功能仅在页面加载后才应用。

例子：

$(document).ready(function () {

    $("#menu-item-1137").on("click", function(){
        $('#waterfacts').attr('class', 'active');
        $('li#simple2Tab').attr('class','active'); 
    });

});

【讨论】：

嗨 Ajak，感谢您的回答！您能否使用我的基础向我展示您提出的代码示例？我真的在这里挣扎。根本不是 javascript 专家，抱歉：/
嗨 AJak，谢谢你的代码！！！尽管尝试应用它，但我遇到了一个错误，在这种情况下的错误是：Uncaught SyntaxError:Unexpected token ILLEGAL 老实说不确定这意味着什么。我按原样粘贴代码以避免错误。
你运行的是什么版本的 jquery？ 1.7以上？我创建了一个简单的小提琴，以展示它是如何工作的。可能会帮助jsfiddle.net/GQxvE
我只是重写了代码并没有收到错误，但我仍然遇到原始问题，页面加载并且功能没有运行。如果我在目标页面中，它可以工作，但如果我在任何其他页面上，它不会等到目标页面被加载。对不起朋友，谢谢你的帮助！

【解决方案2】：

由于快捷方式，您已经在加载 DOM 后绑定了事件

$(function() {})

相当于

$(document).ready(function() {})

jQuery .ready()

您是否在页面初始加载后动态更改/插入您的菜单？如果是这样，您必须在此之后应用该事件。

您可以通过在绑定事件之前检查您的元素是否在 DOM 中来轻松调试此类问题：

$(function() {
    console.log($('#menu-item-1137').length);
    $('#menu-item-1137').click(function(){
       $('#waterfacts').attr('class', 'active');
       $('li#simple2Tab').attr('class','active');    
   });
});

如果您在控制台上的输出显示为零，则您的元素尚未在 DOM 中，并且事件不会被绑定。为了在这种情况下为您提供帮助，我们需要有关您网站结构的更多信息。

【讨论】：