在一个div中链接，尝试在单独的div中加载内容

我正在使用jQuery创建一个网站，我希望能够将我的导航与我的内容分开。 此外，我希望能够有一种选项卡式导航系统，以便我可以单击导航中的链接，它将内容加载到主内容div中。 基本上，我想这样做，以便我可以只保留一个包含所有内容的页面，而不是每个部分的一堆页面。 我已经包含了一张图片，希望能让我的问题更加清晰（右键点击“viw image”，在这个页面上它太小了）：

例如http://img402.imageshack.us/img402/1733/examplew.jpg

Answer 1

我鼓励你使用事件委托。 例如，我们可以使用.on方法将单个事件附加到导航窗格，该窗格将侦听链接上的点击：

 $("#navigation").on("click", "a", function(e){ e.preventDefault(); $("#content").load( $(this).prop("href") ); }); 

哪个适用于以下标记：

 
 Home Gallery 
 
 

Answer 2

 $('#navlink').click(function() { $("#maindiv").load("/url.html"); return false; }); 

Answer 3

考虑到你想要一个包含所有内容的页面，你可以简单地用css隐藏除了一个主div之外的所有内容，然后在单击选项卡时使用javascript / jQuery显示一个div，并隐藏所有其他（主要div） 。

Answer 4

让您的导航链接更改您的中心div的html
Click me

如果你想让它更动态，可以使用ajax来加载它。

如果你想获得更多花哨的尝试Tab小部件

Answer 5

这需要jQuery load（）函数！ 转到http://remysharp.com/jquery-api/并搜索“load” – 您只需要定位div。

顺便说一句，这是框架或服务器端包含的替代品。 这种方法唯一的坏处是搜索引擎将无法关注您的链接。

Answer 6

在jQuery中使用ajax非常简单且完全可控：

  $('#navlink').click(function() { $.ajax({ type: "GET", url: 'URL_OF_THE_RESOURCE', //(maybe you can hold this in the href attr of the anchor tag) //in that case you can use $(this).attr('href'); dataType: "text/html", //spectating HTML back from the server timeout: 8000, //Wait 8 second for the response error: function() { alert('ERROR');//case of server error or timeout give a feedback to the user }, //end error success: function(html) { $('#mainDiv').html(html); //Replace the content with the new HTML } //end succes }); //end ajax return false; }); //end click 

您可以在所有这些导航链接上使用虚拟类（如“navlink”），而不是使用ID，而不是将选择器引用到ID，而是将其引用到类，如：

 $('.navlink').click(function(){ ... 

并且url参数将是：

 url: $(this).attr('href'), 

这样你只需设置一次，所有链接都将获得function，并仍然支持没有JS活动的用户。