我的 Codeigniter 视图中的 Jquery 加载问题答案

【问题标题】：Problem with my Jquery loading in my Codeigniter views我的 Codeigniter 视图中的 Jquery 加载问题
【发布时间】：2009-11-29 16:44:09
【问题描述】：

我正在开发一个单页网站，该网站允许用户在他们想要的时候从导航中添加和删除页面，它的工作方式是，如果单击主导航上的“博客”，则会出现“博客” '部分应该出现在页面上，如果他们然后单击“新闻”，则“新闻”部分也应该可见，但是我开始实现这一点的方式似乎我一次只能有一个部分，我的代码可以是修改为允许在主页上显示多个部分。

这是我的页面代码，其中包含主菜单和用户选择。

 <!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>

【问题讨论】：

标签： php javascript jquery codeigniter

【解决方案1】：

你应该试试这样的

$('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
            });

我还没有测试过，但它应该可以工作。如果可以，请报告您的结果。

或者，您可以创建一个变量来存储加载的内容，将其包装到 div 元素中并将创建的元素附加到#content_pane

【讨论】：

它似乎工作了一半，我希望它在页面上显示内容大约 1 秒钟，然后导航到页面本身。
您是否尝试过在变量中接受加载的内容并将其包装在 div 中？
差不多了，但是 newDiv 之前的 $ 是什么？是不是没必要？
在表示 jquery 对象的变量之前添加 $ 是一个好习惯

【解决方案2】：

在迈克的基础上.. 这样做：

$('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 
            });

e.preventDefault();将停止发生默认操作。那么它不应该跟随链接。 Return False 通常用在 .submit() 函数中。 .click() 需要 .preventDefault。

【讨论】：