調整jQuery代碼以在CodeIgniter中顯示/隱藏div

我正在將我的網站從HTML/CSS移動到CodeIgniter中。有一些PHP的經驗，但沒有太多的jQuery。調整jQuery代碼以在CodeIgniter中顯示/隱藏div

我正在使用的jQuery腳本.show()/.hide()<div>在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>

來源

2011-12-18 chowwy

你要確保你的JS代碼是否有效後，儘量把preventDefault方法，以防止瀏覽器從下面的錨鏈接。

JSLint是檢查你的JS腳本的好工具。

來源

2011-12-18 21:09:30 Shomz

我閱讀了您提供的鏈接;這看起來可能會有所斬獲。我可以將這個jquery片段集成到我當前的代碼中，還是需要單獨的函數？不知道足夠的jQuery來追加它。 – chowwy 2011-12-18 21:34:57

好的，看到你的編輯並嘗試一下;如果它能起作用，它會提高你的答案。 – chowwy 2011-12-18 21:53:12

只需將它作爲綁定函數的第一行插入即可......但讓我困惑的是它是如何工作的更早（當它是HTML），現在它不會（提供您複製JS代碼）。再次，確保你驗證了你的代碼，因爲一個錯誤，一個缺少的報價可能會破壞一切。 – Shomz 2011-12-18 22:10:20

如果您複製並粘貼代碼，那麼你可能有失蹤引號的位置：

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

而在loadContent和showNewContent函數中，您應該只給回調函數作爲參數。你不應該稱他們爲：

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

來源

2011-12-18 20:27:34 cenanozen

感謝您的支持。我做了更正;它仍然沒有工作。 – chowwy 2011-12-18 20:32:42

請看我的修改 – cenanozen 2011-12-18 20:46:04

再次，欣賞意見。它仍然不起作用。當我點擊鏈接時，瀏覽器會打開一個新頁面，而不是在#content div中隱藏/顯示視圖。 – chowwy 2011-12-18 20:55:44

調整jQuery代碼以在CodeIgniter中顯示/隱藏div

回答

相關問題