Why does IE not call the array in my jquery function?

I am using jquery tabs, the information called in the tabs comes from an array however as I also have a language toggle, so the tab names and content change depending on the language selected.

My code works on all browsers except IE where the tab names are called but the content inside the tabs is not.

This is the code for the tabs;

<script type="text/javascript">
$(document).ready(function() {

 //When loaded
 $(".tab_content").hide(); //Hide content
 $("ul.tabs li:first").addClass("active").show(); //Show tab one
 $(".tab_content:first").show(); //Sho开发者_开发问答w tab one content

 //On Click Event
 $("ul.tabs li").click(function() {

 $("ul.tabs li").removeClass("active"); //Remove any "active"
 $(this).addClass("active"); //Add "active" class to current tab
 $(".tab_content").hide(); //Hide all tab content

 var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
 $(activeTab).fadeIn(); //Fade in the active ID content
return false;
 });
});
</script> 

This is the code for calling the content in each language;

<script type="text/javascript">  
        function getLanguageResources(){
    var fr = new Array(); var en = new Array(); 

en['greeting'] = "Hi!"; fr['greeting'] = "Salut!";


    var resources = new Array();
    resources['en'] = en;
    resources['fr'] = fr;


    return resources;
}


function changeLanguage(lang){
var langResources = getLanguageResources()[lang];

$("span[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]);
});  

 $("p[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]); 
  }); 

 $("a[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]); 
  }); 
}

$(document).ready(function() {
$("input[name='languagebutton']").click(function() {
    changeLanguage($(this).val());
});

$(document).ready(
  changeLanguage("en"));

});

I tried changing the tags of my inputted text as inititally the tab names did not appear, when I used tags the tabs appeared but the rest of the content did not.

Thank you in advance for any help!

---

I've checked your code if my implementation is correct everything seems fine, it's working in FF and IE.

I've changed the array structure as you can put it all in one, no need for fr, en variables etc

jQuery:
function getLanguageResources(){
    return {
        "fr":{
            'greeting':'Salut!',
            'hello':'Hello FR'
        },
        "en":{
            'greeting':'Hi!',
            'hello':'Hello EN'
        }
    }
}
function changeLanguage(lang){
var langResources = getLanguageResources()[lang];

$("span[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]);
});

$("p[name='lbl']").each(function(i, elt){ $(elt).text(langResources[$(elt).attr("caption")]); });
$("a[name='lbl']").each(function(i, elt){ $(elt).text(langResources[$(elt).attr("caption")]); });
}

$(document).ready(function() {

 //When loaded
 $(".tab_content").hide(); //Hide content
 $("ul.tabs li:first").addClass("active").show(); //Show tab one
 $(".tab_content:first").show(); //Show tab one content

 //On Click Event
 $("ul.tabs li").click(function() {

 $("ul.tabs li").removeClass("active"); //Remove any "active"
 $(this).addClass("active"); //Add "active" class to current tab
 $(".tab_content").hide(); //Hide all tab content

 var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
 $(activeTab).fadeIn(); //Fade in the active ID content
return false;
 });


$("input[name='languagebutton']").click(function() {
    changeLanguage($(this).val());
});
changeLanguage("en");
});

And HTML I've created:

<ul class="tabs">
<li><a href="#tab1"><span name="lbl" caption="greeting"></span></a></li>
<li><a href="#tab2"><span name="lbl" caption="hello"></span></a></li>
<li><a href="#tab3"><span name="lbl" caption="greeting"></span></a></li>
<li><a href="#tab4"><span name="lbl" caption="hello"></span></a></li>
</ul>

<div class="tab_content" id="tab1">
    tab 1
    <p name="lbl" caption="greeting"></p>
</div>
<div class="tab_content" id="tab2">
    tab 2
    <p name="lbl" caption="hello"></p>
</div>
<div class="tab_content" id="tab3">
    tab 3
    <p name="lbl" caption="greeting"></p>
</div>
<div class="tab_content" id="tab4">
    tab 4
    <p name="lbl" caption="hello"></p>
</div>

<input type="button" name="languagebutton" value="en"/>
<input type="button" name="languagebutton" value="fr"/>

It's working fine for me, you should probably use id instead of name but it works fine.

If it still wont work post your html, jquery code somewhere online.

Cheers

G.