title: Loading Page Fragments on main page using Jquery
body: <p>I am trying to use Jquery to resolve my below issue.</p>
  
  <p>I have got below HTML Links.</p>
  
  <pre><code>&lt;ul class="tabHead tabs-nav"&gt; 
      &lt;li class="tabs-selected" id="tab-1"&gt;
      &lt;a id="tab1" class="load-fragment" href="/index.aspx"&gt;&lt;span&gt;Overview&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-2"&gt;
      &lt;a id="tab2" class="load-fragment" href="/guide.aspx"&gt;&lt;span&gt;Guide&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-3"&gt;
      &lt;a id="tab3" href="/flightschedule.aspx"&gt;&lt;span&gt;Flight Schedule&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-4"&gt;
      &lt;a id="tab4" href="/specialOffers.aspx"&gt;&lt;span&gt;Special Offers&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-5"&gt;
      &lt;a id="tab5" class="load-fragment" href="/photo.aspx"&gt;&lt;span&gt;Photos&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;   
  &lt;/ul&gt;
  </code></pre>
  
  <p>First of all above HTML is generated dynamically, I have written a jquery on class="load-fragment", please see below</p>
  
  <pre><code>$(document).ready(function() 
  {
          $(".load-fragment").each(function() 
          {           
              var fname = $(this).attr('href');
              var lastSlash = fname.lastIndexOf('/');
              var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); //taking out filename for adding it in dynamic DIVs
  
              var dynDivID = "divContent"+fileName;
              $(this).attr("id",fileName)
  
              var newDiv = $("&lt;div&gt;").attr("id",dynDivID).load(fname + " #tabs-container",function ()
              {               
                  $(this).hide();
  
              });      
              $("#column2").append(newDiv); //adding new div in div column2  
          });    
  
          $("#tab1").click(function()
          {
              // load home page on click
              $(this).attr("href", "#");
              $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
              $(this).parent().addClass("tabs-selected");
              $("#divContentindex").show();
              $("#tabs-container").hide();
              $("#divContentguide").hide();
              $("#divContentphoto").hide();
          });
          $("#tab2").click(function()
          {
              // load about page on click
              $(this).attr("href", "#");
              $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
              $(this).parent().addClass("tabs-selected");  
              $("#divContentguide").show();
              $("#tabs-container").hide();
              $("#divContentindex").hide();
              $("#divContentphoto").hide();
          });
          $("#tab5").click(function()
          {
              // load about page on click
              $(this).attr("href", "#");
              $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
              $(this).parent().addClass("tabs-selected"); 
              $("#divContentphoto").show();
              $("#tabs-container").hide();
              $("#divContentguide").hide();
              $("#divContentindex").hide();
          });
  
  }); 
  </code></pre>
  
  <p>If you see above code, i have added the dynamic divs <strong>(divContentindex,divContentguide,divContentphoto)</strong> to DIV "<strong>column2</strong>", I want to avoide the below code written above for hide and show for dynamic DIVs, I want it should also work as dynamic, there should not be any harcoded DIV ID as these ID are created dynamic above.</p>
  
  <p>Please suggest!</p>
  
  <p>Thanks.</p>
  
  <p>Best Regards,
  MS</p>