链接在一个div，试图加载内容在一个单独的div [英] Link in one div, trying to load content in a seperate div

问题描述

我使用jQuery做一个网站，我想能够让我的导航与我的内容分开。此外，我想要能够有一种标签式导航系统，使我可以单击链接在导航，它将加载内容到主要内容div。基本上，我想这样做，使我可以只保持一个页面的所有内容，而不是一个页面的每个部分。我已经包括一个图片，希望使我的问题更清楚（右键单击和viw图像，它在这个页面太小）：

I am using jQuery to make a website, and I want to be able to have my navigation in a separate div from my content. Also, I want to be able to have a sort of tabbed navigation system such that I can click a link in the navigation and it will load the content into the main content div. Basically, I want to do this so that I can just maintain one page with all the content, rather than a bunch of pages for each section. I have included a picture that will hopefully make my question much more clear (right click and "viw image", it's too small on this page):

example http://img402.imageshack.us/img402/1733/examplew.jpg p>

example http://img402.imageshack.us/img402/1733/examplew.jpg

推荐答案

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

I would encourage you to use event delegation. For instance we can use the .on method to attach a single event to the navigation pane that will listen for clicks on links:

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

它适用于以下标记：

<div id="navigation">
    <a href="home.html">Home</a>
    <a href="gallery.html">Gallery</a>
</div>
<div id="content"><!-- content will load here --></div>

这篇关于链接在一个div，试图加载内容在一个单独的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！