jquery更改.load位置

我想使用.load函数做一个菜单，但我不知道如何更改它正在使用的页面。jquery更改.load位置

这是我...

的index.html

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="header"></div> 
     <div id="menu"></div> 
     <div id="main"></div> 
     <script> 
      $("#header").load("header.html"); 
      $("#menu").load("menu.html"); 
      $("#main").load("main.html"); 
     </script> 
    <body> 
</html>

menu.html

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/menu.css"> 
    </head> 
    <body> 
     <div class="menu-item"> 
      <div class="menu-text" id="menu-item1"> 
       Click me! 
      </div> 
     </div> 
    <body> 
</html>

所以当DIV ID “菜单条1/1” 的menu.html被点击，那么它应该改变$("#main").load("main.html");至$("#main").load("OTHERmain.html");，例如index.html。在data-attributes这样的

来源

2013-08-18 ThreaT

试试这个：

<div class="menu-text" id="menu-item1" data-navigate="OTHERmain.html"> 
    Click me! 
</div>

的jQuery：

$(document).on("click",".menu-item div",function(){ 
    $("#main").load($(this).data("navigate")); 
});

你应该在处理动态加载的元素时使用委托事件，因为它简化了日志我知道了。欲了解更多信息，请看$.on

来源

2013-08-18 08:44:45

真棒，很好，干净！ – ThreaT

采取爱维稳特：

<div class="menu-text" id="menu-item1" data-navigate="OTHERmain.html"> 
    Click me! 
</div>

那么你的jQuery的可能是：

$(".menu-item div").click(function(){ 
    $("#header").load($(this).data("navigate")); 
});

编辑：

为了当您单击菜单上改变-text元素，您必须订阅click事件：

现在

$("#menu-item1").click(function(){ 
    $("#main").load("OTHERmain.html"); 
});

，你必须确保所有这些代码都被包裹在document.ready事件中：

$(function(){ 
    $("#menu-item1").click(function(){ 
     $("#main").load("OTHERmain.html"); 
    }); 
});

来源

2013-08-18 08:23:06

它不适用于我...在你的代码中，我还修正** $（“。menu-item div”）**到** $（“。menu-文本div“）**并将** $（”＃header“）加载到** $（”＃main“）。 ** index.html **不会更改为显示** OTHERmain.html ** – ThreaT

我只是给你提供点子。我不完全了解你的商业逻辑，或者它应该如何工作。 –

我很感激。我只是希望你能告诉我为什么当我点击.menu-text div时它不会改变？ – ThreaT

jquery更改.load位置

回答

相关问题