Question

我正在将我的网站从HTML / CSS移动到CodeIgniter中。有一些PHP经验，但jQuery不多。

我用于.show() / .hide() <div>的jQuery脚本可以正常使用HTML页面，但在CodeIgniter中不起作用。我知道脚本的作用（并且我尝试了几个小时的修改），但是无法让它在CodeIgniter中正常运行。

以下是发生的情况：当我点击<a href="">链接时，会打开一个新页面，而不是将视图打开到<div>。由于CodeIgniter的控制器，我实际上并没有打开页面。我认为这就是困难所在，但我不确定。

在CodeIgniter方面：我已经自动加载了JavaScript库，我在标题中调用了脚本。这是jQuery代码（下面的HTML）：

$(document).ready(function() {  

    var hash = [removed].hash.substr(1);  
    var href = $('#nav li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)  
        }  
    });  

    $('#nav li a').click(function(){  

    var toLoad = $(this).attr('href')+' #content';  
    $('#content').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    [removed].hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content).show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });
});

和HTML：

<div id="leftcol">

<div id="usermenu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option2">Messages</a></li><br />
</ul>
</div>
</div>


<div id="content">

</div>

<div id="rightcol"

</div>

Answer 1

如果您复制并粘贴了代码，则此处可能缺少引号：

 function showNewContent() {  
    $('#content).show('normal',hideLoader());  
               ^
               |
 --------------+

在loadContent和showNewContent函数中，您应该将回调函数作为参数。你不应该打电话给他们：

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent)  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader);
}

Answer 2

确保JS代码有效后，尝试使用preventDefault方法，以防止浏览器跟踪锚链接。

JSLint是检查JS脚本的绝佳工具。

调整jQuery代码以在CodeIgniter中显示/隐藏div

2 个答案: