Question

I am trying to use Jquery to resolve my below issue.

I have got below HTML Links.

<ul class="tabHead tabs-nav"> 
    <li class="tabs-selected" id="tab-1">
    <a id="tab1" class="load-fragment" href="/index.aspx"><span>Overview</span></a>
    </li>
    <li id="tab-2">
    <a id="tab2" class="load-fragment" href="/guide.aspx"><span>Guide</span></a>
    </li>
    <li id="tab-3">
    <a id="tab3" href="/flightschedule.aspx"><span>Flight Schedule</span></a>
    </li>
    <li id="tab-4">
    <a id="tab4" href="/specialOffers.aspx"><span>Special Offers</span></a>
    </li>
    <li id="tab-5">
    <a id="tab5" class="load-fragment" href="/photo.aspx"><span>Photos</span></a>
    </li>   
</ul>

First of all above HTML is generated dynamically, I have written a jquery on class=”load-fragment”, please see below

$(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 = $("<div>").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();
        });

}); 

If you see above code, i have added the dynamic divs (divContentindex,divContentguide,divContentphoto) to DIV “column2“, 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.

Please suggest!

Thanks.

Best Regards,
MS

Answer 1

Replace

var lastSlash = fname.lastIndexOf('/');
var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); // ...
var dynDivID = "divContent"+fileName;
$(this).attr("id",fileName)

By

var dynDivID = "divContent"+$(this).attr('id');

Add newDiv.addClass('dynDiv');
before $("#column2").append(newDiv);

And replace all

$("#tabX").click(function() { ... });

By

$(".load-fragment").click(function() {
    // load about page on click
    var thiz = $(this);
    thiz.attr("href", "#");
    $(".tabs-nav li").removeClass("tabs-selected"); // ...
    thiz.parent().addClass("tabs-selected");
    $('.dynDiv').hide();
    $("#divContent" + thiz.attr("id")).show();
}

Should do the job (not tested)

Edited according to comment