jquery - 为什么 Jquery .attr() 对 IE 7/8 中的我的对象不起作用？

Question

我遇到了一个非常特殊的 IE 问题，其中 .attr() 函数不会选择任何内容。

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

selectedTab 是从 div 的 onclick 方法传递的变量，如下所示:

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

我在 IE 开发人员工具 javascript 控制台中看到的问题是，当 IE 访问 .attr() 函数时，它不会返回 id 值。此时，selectedTab(保存 jqueryselector 的变量)的值是“#whatisaDog.tab”。 .attr('id') 不应该返回“WhatisaDog”吗？它适用于 Firefox 和 Chrome，但不适用于 IE。

任何帮助将不胜感激，谢谢!

编辑:这里有更多的代码。这里的想法是，我在一个页面上有多个选项卡，并且希望根据单击的选项卡显示某些内容。是的，我知道 jquery-ui 出色的选项卡功能，但我没有使用它，因为它不能以这种方式工作。

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

这是一些 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

而不是

handleSelectedTab(this);

为什么不将 ID 传递给函数以便立即可用

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

根据您在该功能中所做的事情，它可能会起作用。

更新:请参阅下面有关唯一 ID 的评论。