JQuery 后退/前进功能与 Ajax

发布于 2024-09-11 04:39:20 字数 3721 浏览 6 评论 0原文

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

原文

I've been coding a site using JQuery to load different .html files into a content div on the page. Of course this means that the back and forward buttons don't do much to navigate within the site. I've done some research, and found a bunch of options like history, and even found this Stack Overflow question regarding my issue. Unfortunately I've spent two days now banging my head against my keyboard trying to get one of these jquery plugins to work. Can someone help me to implement one of these back/forward enabling plugins into my site? Your help would be huuuugely appreciated.

Thanks in advance!

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

and my 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);
}

It seems like it shouldn't be that hard, but I guess I just don't understand how it's supposed to work. My content div is called "#text", and all the links in the header pipe content into it. I've tried jquery.history, and jquery.address both extensively, and couldn't get them to work. Thanks again in advance for any advice or help, I really hope someone can help me out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纸短情长 2024-09-18 04:39:20

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

更改您的“selectThis”函数来更改哈希值，但不要再
添加每 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。

the easiest way is to use in-built browser mechanisms, i.e. change the URL displayed. If you do this by adding a hash-tag to the end of the URL, no navigation will be performed. The key steps are

change your "selectThis" function to change the hash, but do no more
add a function that runs every 100 ms, and ajax your div if the hash value has changed.

You can do it with something like this:


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.

as you click backward/forward in your browser, the hash will change, and your page will ajax in the appropriate content.

回复收藏 0 原文