Pourquoi Jquery .attr() ne fonctionne pas sur mon objet dans IE 7/8?

Question

J'ai ce problème IE très particulier où la fonction .attr() ne sélectionnera rien.

var tabID = $(selectedTab).attr('id'); 

selectedTab est une variable passée d'une méthode onclick d'un div comme ci-dessous:

<div id="WhatisaDog" onclick="handleSelectedTab(this);" class="tab tabPassive"></div> 

La question que je vois dans la console javascript outils de développement IE est que lorsque IE arrive à la .attr(), il ne renvoie pas la valeur de l'ID. À ce stade, la valeur de selectedTab (une variable contenant un jqueryselector) est "# whatisaDog.tab". Ne devrait pas .attr ('id') retourner "WhatisaDog"? Cela fonctionne dans firefox et chrome juste pas IE.

toute aide serait très appréciée, merci!

EDIT: Voici beaucoup plus du code. L'idée ici est que j'ai plusieurs onglets sur une page et que je veux afficher certains contenus en fonction de l'onglet sur lequel j'ai cliqué. oui je connais la merveilleuse fonctionnalité des onglets de jquery-ui mais je ne l'utilise pas parce qu'elle ne fonctionne pas de cette façon.

$(document).ready(function() { 
    $('#DidYouKnow p.tabtextPassive a').append("?"); 
    var URL = document.URL; 
    var params = URL.split("#"); 
    var tabToLoad = "#" + params[1]; 
    $(".articleContent").hide(); 
    if (params[1] != undefined) { 
     handleSelectedTab($(tabToLoad +'.tab')); 
    } 
    else { 
     handleSelectedTab($('.tab').first()); 
    } 
}); 

function handleSelectedTab(selectedTab) { 

    $('.tabLeft').removeClass('leftActive').addClass('leftPassive'); 
    $('.tabRight').removeClass('rightActive').addClass('rightPassive'); 
    $('.tab').removeClass('tabActive').addClass('tabPassive'); 
    $('.articleTabFormat p').removeClass('tabTextActive').addClass('tabTextPassive'); 

    $('.articleContent').hide(); 

    $(selectedTab).prev().removeClass('leftPassive').addClass('leftActive'); 
    $(selectedTab).removeClass('tabPassive').addClass('tabActive'); 
    $(selectedTab).next().removeClass('rightPassive').addClass('rightActive'); 
    $(selectedTab).children('p').removeClass('tabTextPassive').addClass('tabTextActive'); 

    var tabID = $(selectedTab).attr('id'); 
    loadSelectedBodyArea(tabID); 
} 

function loadSelectedBodyArea(areaID) { 

    if (areaID == 'Maps') { 
    } 
    else if (areaID == 'Flags') { 
    } 
    else if (areaID == '') { 
    } 
    else { 
     $('#'+ areaID +'.articleContent').show(); 
    } 
} 

et voici quelques-unes des html:

<div id="tabArea"> 
    <div class="articleTabsHolder"> 
     <div class="articleTabFormat"> 
      <div id="WhatisaHamster" class="tabLeft leftPassive"> </div> 
      <div id="WhatisaHamster" onclick="handleSelectedTab(this);" class="tab tabPassive"> 
       <p class="tabTextPassive" style="padding-top:10px;"> 
        <a href="#WhatisaHamster">What is a Hamster?</a> 
       </p> 
      </div> 
      <div id="WhatisaHamster" class="tabRight rightPassive"> </div></div> 
     <div class="articleTabFormat"> 
      <div id="FactFile" class="tabLeft leftPassive"> </div> 
      <div id="FactFile" onclick="handleSelectedTab(this);" class="tab tabPassive"> 
       <p class="tabTextPassive" style="padding-top:10px;"> 
        <a href="#FactFile">Fact File</a> 
       </p> 
      </div> 
      <div id="FactFile" class="tabRight rightPassive"> </div> 
     </div> 
     </div> 
     <div id="WhatisaHamster" class="articleContent"> </div> 
     <div id="FactFile" class="articleContent"> </div> 
    </div> 
</div> 

Answer 1

Au lieu de

handleSelectedTab(this); 

Pourquoi ne pas passer l'ID à la fonction de sorte qu'il est immédiatement disponible

handleSelectedTab($(this).attr('id')); 

Selon ce que vous faites dans la fonction, cela peut fonctionner.

MISE À JOUR: Voir le commentaire ci-dessous concernant les ID uniques.