Why does Jquery .attr() not work on my object in IE 7 / 8 ?

Question

I have this very peculiar IE issue where the .attr() function will not select anything.

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

selectedTab is a variable passed from an onclick method of a div like below:

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

The issue I am seeing in the IE developer tools javascript console is that when IE gets to the .attr() function, it does not return the id value. At that point the value of selectedTab (a variable holding a jqueryselector) is "#whatisaDog.tab". Shouldn't .attr('id') return "WhatisaDog" ? It works in firefox and chrome just not IE.

any help would be much appreciated, thanks!

EDIT: here is a lot more of the code. The idea here is that I have several tabs on a page and want to show certain content depending on which tab was clicked. yes I know about jquery-ui's wonderful tabs functionality but I am not using it because it does not work in this way.

$(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();
    }
}

and here is some of the 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

Instead of

handleSelectedTab(this);

Why not pass the ID to the function so it is immediately available

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

Depending on what you are doing within the function it may work.

UPDATE: See comment below regarding unique IDs.