Loading Page Fragments on main page using Jquery
<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>
