views:

206

answers:

1

Hello,

I am working on a one page website that allows the users to add and remove pages from there navigation as and when they would like too, the way it works is that if the click 'Blog' on the main nav a 'Blog' section should appear on the page, if they then click 'News' the 'News' section should also be visible, however the way I have started to implement this it seems I can only have one section at a time, can my code be adpated to allow multiple sections to shown on the main page.

Here is my code for the page that has the main menu and the users selections on it.

 <!DOCTYPE html>
<head>
    <title>Development Site</title>
    <link rel="stylesheet" href="/media/css/reset.css" media="screen"/>
    <link rel="stylesheet" href="/media/css/generic.css" media="screen"/>
    <script type="text/javascript" src="/media/javascript/jquery-ui/js/jquery.js"></script>
    <script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
         $('a.menuitem').click(function() {
       var link = $(this), url = link.attr("href");
           $("#content_pane").load(url);
           return false; // prevent default link-behavior
      });
     });
       </script>
    </head>
    <body>
     <li><a class="menuitem" href="inspiration">Inspiration</a></li>
     <li><a class="menuitem" href="blog">Blog</a></li>
     <div id="content_pane">

     </div>
    </body>
    </html>
A: 

You should try something like this

$('a.menuitem').click(function() {
                    var link = $(this), url = link.attr("href");
                        var $newDiv = '<div></div>';
                        $("#content_pane").append($newDiv);
                        $newDiv.load(url);
                        return false; // prevent default link-behavior
            });

I havent tested that but it should work. If you can please report your result.

Alternatively you can create a variable that stores loaded content, wrap it into a div element and append created element to the #content_pane

Mike
It seems to half work, The content display on the page I want it to for about 1 second then just navigates to the page itself.
sico87
have you tried to accept loaded content in a variable and wrap it in a div?
Mike
That's close, but what the $ before newDiv? Unnecessary isn't it?
Zack
it is a good practice to add $ before variables that mean jquery object
Mike