1

我一直在编写一个网站，使用 JQuery 将不同的 .html 文件加载到页面上的内容 div 中。当然，这意味着后退和前进按钮在站点内的导航作用不大。我做了一些研究，发现了很多选项，比如历史，甚至发现了关于我的问题的Stack Overflow问题。不幸的是，我现在已经花了两天时间把头撞在键盘上，试图让这些 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 ，但无法让它们工作。再次提前感谢您的任何建议或帮助，我真的希望有人可以帮助我。

4

2 回答 2

0

最简单的方法是使用内置的浏览器机制，即更改显示的 URL。如果您通过在 URL 末尾添加井号标签来执行此操作，则不会执行导航。关键步骤是

  1. 更改您的“selectThis”函数以更改哈希，但不再执行
  2. 添加一个每 100 毫秒运行一次的函数，如果哈希值发生变化，则 ajax 你的 div。

你可以这样做：


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.

当您在浏览器中单击后退/前进时，哈希值将发生变化，并且您的页面将在适当的内容中进行 ajax。

于 2010-07-23T21:50:14.717 回答
-1

尝试使用 balupton 的jQuery History，根据我的经验，它效果最好并且最容易使用。它的支持也很棒。

于 2010-09-18T11:51:19.070 回答