jQuery Deep Linking, Inhalt von div in anderen Seitenausgaben laden

Question

Also zugeben, ich bin neu, aber ich habe ein paar Bücher gelesen und online gesucht und kann nicht ganz finden, was ich brauche. Jede Hilfe wäre also ein Segen.

Ich konnte eine Funktion einrichten, bei der beim Klicken auf den Navigationslink das "#content" div von der entsprechenden Seite in das "#content" div auf der aktuellen Seite geladen wird. Das Problem trat auf, als ich versuchte, Deep-Linking mit dem Adress-Plugin zu implementieren. Ich kann anscheinend nicht herausfinden, wie man es bringt, nur das "#content" div von einer Seite zu laden.

Sie können es hier leben sehen: www.theeastcoastclassic.com/index1.html Das untere nav hat immer noch die ursprüngliche .load-Funktion, die Oberseite verwendet die tiefe Verknüpfung Funktion.

Hier ist meine JS-Datei:

// Deep Linking 

    function loadURL(url) { 
      console.log("loadURL: " + url); 
      $("#content").load(url); 
    } 

    $.address.init(function(event) { 
      console.log("init: " + $('[rel=address:' + event.value + ']').attr('href')); 
      }).change(function(event) { 
      $("#content").load($('[rel=address:' + event.value + ']').attr('href')); 
      console.log("change"); 
    }) 

    $('ul#topNav a').live('click', function(e){ 
      $.scrollTo('#content', 'slow'); 
      $("#content").hide(); 
      loadURL($(this).attr('href').fadeIn("6000")); 
      e.preventDefault(); 
    }); 

// Top Nav Hijax 

/* $("ul#topNav a").live("click",function(e) { 
     $.scrollTo('#content', 'slow'); 

     var url = $(this).attr("href") + " #content"; 
     $("#content").hide().load(url).fadeIn("6000"); 
     e.preventDefault(); 
    }); */ 

// Bot Nav Hijax 

    $("ul.bNav a").live("click",function(e) { 
     $.scrollTo('#content', 'slow'); 

     var url = $(this).attr("href") + " #content"; 
     $("#content").hide().load(url).fadeIn("6000"); 
     e.preventDefault(); 
    }); 

//Equal Height Columns 

    $(document).ready(function() { 
     $("div .col3").equalHeights(); 
           }); 

Dies ist die gekürzte HTML:

<ul id="topNav"> 
      <li> 
      <a href="index.html" title="index" rel="address:/index"> Home </a> 
      </li> 
      <li> 
      <a href="schedule.html" title="schedule" rel="address:/schedule"> Schedule </a> 
      </li> 
      <li> 
      <a href="lodging.html" title="lodging" rel="address:/lodging"> Lodging </a> 
      </li> 
      <li> 
      <a href="sponsors.html" title="sponsors" rel="address:/sponsors"> Sponsors </a> 
      </li> 
      <li> 
      <a href="directions.html" title="directions" rel="address:/directions"> Directions </a> 
      </li> 
      <li> 
      <a href="contact.html" title="contact" rel="address:/contact"> Contact </a> 
      </li> 
     </ul> 



<div id="content" class="clearfix"> 
</div> 

Auch wenn Sie die equalHeights Spalten irgendwelche Tipps zu haben, bitte lassen Sie mich wissen, scheint es, als ob diese Plugin ist sehr einfach, aber erscheint auf jedem Browser anders, ich bekomme viele Bildlaufleisten.

Answer 1

1. das equalHeights Plugin hat nichts mit der Frage zu tun - wenn Sie Fehler mit diesem Plugin starten eine separate Frage

2. begegnen sollten Sie die Plugins Dokumentation lesen - Sie eine change() Funktion hinzufügen müssen, so wenn sich die Adresse ändert, wird dies ausgeführt:

   $ .address.change (Funktion (Ereignis) { // Ihre Ladelogik geht hier });