Jquery Image点击不在IE中工作

时间:2011-02-25 18:46:19

标签: javascript jquery css

HI 在我的项目中,我有一个Popup图像。 当用户点击图像的左侧部分时,它将重定向用户 到page1.aspx。当用户点击图像的右侧部分时 它会将用户重定向到page2.aspx。我使用JQuery,它的工作原理 火狐很好。但它在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>

1 个答案:

答案 0 :(得分:0)

您是否尝试使用imagemap?这样几乎所有浏览器都支持它,包括IE。

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

编辑:在查看您的网站时,也许您可​​以将展开的div功能绑定到图像.major而不是.sub div。

看起来.sub div正在拦截IE上的点击事件,但符合标准的浏览器明白.minor图片应该在.sub div之上“呈现”。 / p>

相关问题