javascript - Link in one div, trying to load content in a seperate div - Stack Overflow

admin管理员组

文章数量:1410689

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 .jpg

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

• javascript
• jquery
• css

Share Improve this question Follow asked Dec 17, 2009 at 18:32 deversdevers 16311 silver badge1111 bronze badges 2

• 6 +1 for hand drawn circles! – Joel Commented Dec 17, 2009 at 18:34
• Are you looking to do all client-side or do you have a db to pull data from? – Brian Kim Commented Dec 17, 2009 at 18:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

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

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") );
});

Which works with the following markup:

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

Considering that you want one page with all of the content, you could simple hide all but one main div with css, and then use javascript/jQuery to show one div when a tab is clicked, and hide all of the other (main divs).

Have your navigation links change the html of your center div
<a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>

if you want it to be more dynamic use ajax to load it.

and if you want to get a bit more fancy try out the Tab widget

This calls for the jQuery load() function! Go to http://remysharp./jquery-api/ and search for 'load' -- you just need to target the div.

By the way, this is sort of an alternative to frames or server-side includes. The only bad thing about this approach is that Search Engines won't be able to follow your links.

Using ajax with jQuery its pretty simple and totally controllable:

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

Instead of usign an ID, you could use a dummy class (like "navlink") on all those navlinks, so instead of referencing the selector to the ID, reference it to the class like:

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

and the url parameter will be:

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

That way you just set this once and all the links will get the functionality and still give support to users that don't have JS active.

本文标签： javascriptLink in one divtrying to load content in a seperate divStack Overflow