jQuery的图像单击无法在IE浏览器

Question

嗨，在我的项目中，我有一个弹出图像。 当用户单击图像的左侧时，会将用户重定向到page1.aspx。 当用户单击图像的右侧时，会将用户重定向到page2.aspx。 我为此使用了JQuery，它在Fire fox中工作正常。 但这在IE中不起作用。 可能是什么原因，。 任何帮助将不胜感激。

谢谢

这是代码

<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
    //!\: Slider nav thingy.
    $("#link_one").click(function()
    {
        var aWidth = $(this).width();
        if($(this).hasClass("closed"))
        {
            $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
            if($("#link_two").hasClass("open"))
            {
                var bWidth = $("#link_two").width();
                $("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
                $("#link_two a").hide();
            }
            $("a", this).show();
        }
        else
        {
            $("a", this).hide();
            $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
        }
    });
    $("#link_two").click(function()
    {
        var aWidth = $(this).width();
        if($(this).hasClass("closed"))
        {
            $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
            if($("#link_one").hasClass("open"))
            {
                var bWidth = $("#link_one").width();
                $("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
                $("#link_one a").hide();
            }
            $("a", this).show();
        }
        else
        {
            $("a", this).hide();
            $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
        }
    });
    //!\: This could all be achieved with CSS.
    $(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>

<!-- Main Content Container -->
    <div id="mainContentContainer">

        <!-- Top Link Slider -->
        <div id="headerContainer" class="printHide">
            <div id="headerLinkContainer">
              <div id="banner_container">
                <div id="link_one" class="sub closed">
            <img class="major" src="images/patient_info.gif" border="0" />
            <img class="minor" src="images/sub_nav.gif" border="0" />
            <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a>
            <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a>
        </div>
                <div id="link_two" class="sub closed">
            <img class="major" src="images/prescribe_info.gif" border="0" />
            <img class="minor" src="images/sub_nav.gif" border="0" />
            <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a>
            <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a>
        </div>
                <div id="link_three" class="open"><a href="#ISIContainer"><img src="images/isi.gif" border="0" /></a></div>
              </div>            
            </div>

        </div>

Answer 1

您是否尝试过使用图像映射 ？ 这样，几乎所有浏览器（包括IE）都支持它。

如果愿意，还可以捕获<area>标记的click()事件。

编辑：在查看您的站点时，也许您可​​以将扩展div功能绑定到图像.major而不是.sub div。

看起来.sub div正在拦截IE上的click事件，但符合标准的浏览器了解到.minor图片应呈现在.sub div之上。