使用Ajax的JQuery返回/轉發功能

我一直在使用JQuery來編寫一個站點，將不同的.html文件加載到頁面上的內容div中。當然，這意味着後退和前進按鈕在網站內部瀏覽時沒有多大用處。我已經做了一些研究，並發現了一些歷史選項，甚至在我的問題上發現了this Stack Overflow question。不幸的是，我已經花了兩天的時間把我的頭撞到我的鍵盤上，試圖讓這些jquery插件中的一個工作。有人可以幫助我將這些後退/前進啓用插件之一實現到我的網站嗎？你的幫助將huuuugely表示讚賞。使用Ajax的JQuery返回/轉發功能

在此先感謝！

<!DOCTYPE html> 
    <html lang="en"> 

     <head> 
     <title>Toward Maximum Independence</title> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
     <link rel="stylesheet" href="pagesstyle.css" type="text/css" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/javascript.js"></script> 
     </head> 

    <body> 
     <div id="header"> 
     <div id="menu"> 
      <ul id="nav"> 
      <li> 

       <a href="#">DONATE&nbsp;</a> 
       <ul> 
       <li><a href="#" id="donationform">Donation Form</a></li> 
      <li><a href="#" id="donateyourcar">Donate Your Car</a></li> 
      </ul> 
      </li> 

      <li><a href="#">GET INVOLVED</a> 
      <ul> 
       <li><a href="#" id="referaconsumer">Refer a Consumer</a></li> 
       <li><a href="#" id="upcomingevents">Upcoming Events</a></li> 
       <li><a href="#" id="prospectiveemployers">Prospective Employers</a></li> 
       <li><a href="#" id="takepoliticalaction">Take Political Action</a></li> 

      </ul> 
      </li> 

      <li><a href="#">OUR PROGRAMS</a> 
      <ul> 
       <li><a href="#" id="jobplacement">Job Placement</a></li> 
       <li><a href="#" id="fostercare">Foster Care</a></li> 
       <li><a href="#" id="independentliving">Independent Living</a></li> 
       <li><a href="#" id="projectconnect">Project Connect</a></li> 
      </ul> 
     </li> 

     <li><a href="#">WHO WE ARE</a> 
      <ul> 
      <li><a href="#" id="missionstatement">Mission Statement</a></li> 
      <li><a href="#" id="history">History</a></li> 
      <li><a href="#" id="boardofdirectors">Board of Directors</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 


    <div id="content"> 
     <div id="text"> 
     <!--Content goes here --> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 

</body>

和我的javascript：

jQuery.event.add(window, "load", initialize); 
jQuery.event.add(window, "resize", initialize); 



function initialize() 
{ 

    $('#header').css({'visibility':'visible'}); 
    var h = $(window).height(); 
    var w = $(window).width(); 
    $('#header').css({'width': w, 'height': w*.190}); 
    $('#nav a').bind("click", selectThis); 
    $('#leftcolumn a').bind("click", selectThis); 
} 

function selectThis() 
{ 
    var url='text/' + $(this).attr('id') + '.html'; 
    $('#text').load(url); 
}

現在看來似乎不應該是很難的，但我想我只是不明白它是如何工作的。我的內容div叫做「#text」，並且標題管道中的所有鏈接都將內容放入其中。我已經廣泛地嘗試過jquery.history和jquery.address，並且無法讓它們工作。再次感謝您的任何建議或幫助，我真的希望有人能幫助我。

來源

2010-07-23 travisshawnhill86

最簡單的方法是使用內置的瀏覽器機制，即更改顯示的URL。如果您通過在網址末尾添加散列標籤來完成此操作，則不會執行導航。關鍵的步驟是

改變你的「selectThis」功能改變哈希，但確實沒有更多的
添加運行每100毫秒的功能，如果這兩個散列值已更改阿賈克斯的股利。

你可以像這樣做：


function selectThis() 
{ 
    window.location.hash = $(this).attr('id'); 
} 

var lastUrl; // adding a global variable for short code, ideally you'd find a way to avoid this. 

$(
window.setInterval(function() { 
    var url='text/' + window.location.hash + '.html'; // possibly you have to remove the first character of the hash to make this work... 
    if (lastUrl != url) { 
     lastUrl = url; 
     $('#text').load(url); 
    } 
}, 100); 
); // wrapping this function in the jQuery selector delays setting up the timeout until the page has loaded.

你點擊向後/向前在瀏覽器中，哈希會有所改變，你的頁面將在適當的內容阿賈克斯。

來源

2010-07-23 21:50:14

-1

嘗試balupton的jQuery History而不是，我的經驗，它的作品最好，是最容易使用。它的支持也非常棒。

來源

2010-09-18 11:51:19 balupton

使用Ajax的JQuery返回/轉發功能

回答

相關問題