Question

（wave newbie flag，也是JS和jQuery的新手）

我正在我的公司网站上工作，建立在Squarespace上。

我们有一组产品，其中大部分也有某种配件。我试图避免使用带有选项卡式界面的超长页面div，许多div让我眼花缭乱。

所以我认为我可以使用jQuery的SuperFish下拉插件，到目前为止似乎没问题。但是现在我面临着将要存储在单独页面中的信息调用并放入主页面而不替换页面。

现在......当我点击我设置的一个链接进行测试时，该链接会执行加载html页面的“预期”响应，但它会接管整个内容并删除我的导航。

我完全愿意做自己的工作和RTFM，但我不确定在哪里查看上述手册。所以我愿意接受文档指示。

这是我到目前为止所拥有的。

// initialise plugin
$(document).ready(function() {
$(function(){
$('ul.sf-menu').superfish();

// this bit was taken from this tutorial: http://is.gd/PuaK-
$('#nav li a').click(function(){
// function to load in the actual page data
var toLoad = $(this).attr('href')+' #content';
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show();
}
return false;
});

谢谢你的期待。

6/10/09 - 更新 - 我花了一些时间RTFM。而且我已经到了我认为我理解“.load”功能如何工作的地步。我已经能够在测试页面上成功使用它。所以现在我想我可以澄清我的目标。

精炼声明：
我想采用<a>目的地，并将<div>数据的内容转换为<iframe>。

这是我第一次使用JavaScript进行真正的开发;我知道有时候处理新手很令人沮丧，我提前感谢你的耐心等待。

09年6月15日
好的......我暂时搁置这个想法。这是我的深度，目前正在阻碍生产的重要时刻。如果有人有个好主意我仍然开放，再次感谢。

Answer 1

我认为Benny Wong是对的。

听起来你的结构是：

<div id='content'>
  <div id='nav'>...</div>
  other stuff
</div>

按照建议尝试：

<div id='nav'>...</div>
<div id='content'>
  other stuff
</div>

让我们花一点时间来澄清#content在这种情况下的两种用法。

$('#content').load('http://whatever #content');

第一个是目的地。该div的所有内容都将被替换。这就是为什么Benny建议你把#nav移到div之外。

第二次使用#content（在url之后）告诉jquery要抓取的其他页面的哪一部分。

Answer 2

你说你的页面结构是这样的：

<div class="nav">
  <ul>
   <li><a href="">nav link</a></li>
   <li></li>
  </ul>
</div
<div class="content">
  <p></p>
</div>

然后在你的JavaScript中你有：

$('#nav li a').click(function(){ ...

嗯，#nav是指ID，但您的HTML只有类。

这意味着您的点击功能永远不会被执行，只需点击链接，您就可以正常方式导航到该页面。

您必须使用.nav来定位课程：

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  function loadContent() {
    $('#content').load(toLoad,'',showNewContent);
  }
  function showNewContent() {
    $('#content').show();
  }
  return false;
});

但是该代码也不起作用，因为你在click事件中定义的loadContent（）函数永远不会被执行。

我会这样写：

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  $('#content').load(toLoad, '', function() {
    $('#content').show();
  });
  return false;
});

Answer 3

这里有两件事。

你引用了类似的类 ID。对于ID我们前缀#like $（ '＃内容'）。如果你真的想引用该类然后删除＃并放一个。（点）
您可以参考其他页面和加载它，但事实并非如此必然意味着它会起作用正常。例如，如果页面你正在加载脚本标签它的标题，它将无法正常工作内容会显示出来。一个解决方法是移动身体内部的标签您要加载的页面。此外，您可能想要确保你没有冲突具有相同的名称功能或ID。

让jQuery从另一个页面加载信息

3 个答案: