1

JQuery を使用してさまざまな .html ファイルをページのコンテンツ div にロードするサイトをコーディングしています。もちろん、これは戻るボタンと進むボタンがサイト内をナビゲートするのにあまり役に立たないことを意味します。私はいくつかの調査を行い、歴史のような多くのオプションを見つけました。また、私の問題に関するこのスタック オーバーフローの質問も見つけました。残念ながら、これらの jquery プラグインの 1 つを機能させようとして、キーボードに頭をぶつけて 2 日間費やしました。これらのバック/フォワードを有効にするプラグインの 1 つを私のサイトに実装するのを手伝ってくれる人はいますか? あなたの助けは非常に高く評価されます.

前もって感謝します！

    <!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 ミリ秒ごとに実行される関数を追加し、ハッシュ値が変更された場合は div を ajax します。

次のようなものでそれを行うことができます：


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 に答える