Problem with my Jquery loading in my Codeigniter views_问答_开发者

Problem with my Jquery loading in my Codeigniter views

开发者 https://www.devze.com 2022-12-12 15:55 出处：网络

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

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="conten开发者_JS百科t_pane">

        </div>
    </body>
    </html>

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

Building on what Mike put.. do this:

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

The e.preventDefault(); will stop the default action from occuring. Then it should not follow the link. Return False is usually used in the .submit() function. You'll need .preventDefault for the .click().