Question

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

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

Answer 1

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

Answer 2

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

$("#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>

Answer 3

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

Answer 4

让导航链接更改中心div的html <a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>

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

如果你想更加花哨一点，试试Tab小部件

Answer 5

在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'),

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

Answer 6

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

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

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

6 个答案: