title: AJAX content loader only works with half my links
body: <p>I'm working on a site using an AJAX content loader to bring in one div from all my HTML pages. It works on the links in my <code>#menu</code> section, but not in my <code>#thumbs</code> section.</p>
  
  <p>Even when I switch the links to opposite sections, they only work in the <code>#menu</code> and still not the <code>#thumbs</code>. I've spent hours looking at this and switching things around, but still can't figure it out! </p>
  
  <p>I've tried using <code>#thumbs a</code>, <code>#thumbs</code>, <code>#t1 a, #t2 a, #t3 a, #t4 a, #t5 a, #t6 a</code>, etc etc and still nothing!!</p>
  
  <p>You can see the full site so far here: <a href="http://www.sarahubbarddesign.com/BP%20SITE-SHD/index.html" rel="nofollow">http://www.sarahubbarddesign.com/BP%20SITE-SHD/index.html</a>
  Any help is appreciated!</p>
  
  <pre><code>&lt;div id="header"&gt;
          &lt;div id="logo"&gt;
              &lt;img src="images/borealis_photo_logo.jpg" alt=""/&gt;
          &lt;/div&gt;
          &lt;div id="menu"&gt;
              &lt;div class="menuContact"&gt;&lt;a href="contact_bp.html" id="mC"&gt;Contact&lt;/a&gt;&lt;/div&gt;
              &lt;div class="menuAbout"&gt;&lt;a href="about_bp.html" id="mA"&gt;About&lt;/a&gt;&lt;/div&gt;
              &lt;div class="menuHome"&gt;&lt;a href="index.html" id="mH"&gt;Home&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="mainImage"&gt;
          &lt;img src="images/homeImage.jpg" alt=""/&gt;
      &lt;/div&gt;
      &lt;div id="thumbs"&gt;
          &lt;div id="t1"&gt;&lt;a href="portfolio1_bp.html" id="p2"&gt;&lt;img id="i1" src="images/thumbs/portThumb_snort.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="t2"&gt;&lt;a href="portfolio2_bp.html" id="p2"&gt;&lt;img id="i2" src="images/thumbs/portThumb_horse.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="t3"&gt;&lt;a href="portfolio3_bp.html" id="p3"&gt;&lt;img id="i3" src="images/thumbs/portThumb_pets.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="t4"&gt;&lt;a href="portfolio4_bp.html" id="p4"&gt;&lt;img id="i4" src="images/thumbs/portThumb_ppl.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="t5"&gt;&lt;a href="portfolio5_bp.html" id="p5"&gt;&lt;img id="i5" src="images/thumbs/portThumb_places.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="t6"&gt;&lt;a href="portfolio6_bp.html" id="p6"&gt;&lt;img id="i6" src="images/thumbs/portThumb_things.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!--END THUMBS DIV--&gt;
  
  //NEW-- LOAD CONTENT IN MAINIMAGE DIV AND CHANGE URL       
      var hash = window.location.hash.substr(1);
      var href = $("#menu a, #thumbs a").each(function(){
          var href = $(this).attr('href');
          if(hash==href.substr(0,href.length-5)){
              var toLoad = hash+'.html #mainImage';
              $('#mainImage').load(toLoad)
          }
      });
      $("#menu a, #thumbs a").click(function(){             
          var toLoad = $(this).attr('href')+' #mainImage';
          $('#mainImage').fadeOut("fast",loadContent);
          window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
          function loadContent() {
              $('#mainImage').load(toLoad,'',showNewContent())
          }
          function showNewContent() {
              //Slider();
              $('#mainImage').fadeIn("1000");
              //Slider();
          }
          return false;
      });
  </code></pre>