Html 显示和隐藏IE8和IE9中的div

在IE8和IE9中，我似乎无法在单击时显示两个div。任何我

<div class="FormBottom grid-container">
                    <div class="Required grid-50">
                        *Verplichte velden
                    </div>
                    <div class="Privacy grid-50 grid-container">
                        <div class="PrivacyStatement grid-100">
                            <a href="javascript:void(0);" id="showPopup1">Privacy       Statement</a> - <a href="javascript:void(0);" id="showPopup2">Cookies</a>
                        </div>
                    </div>
<div id="overlayWrapper1" style="display:none;">
        <div id="overlayContent1">
            <button class="closeBtn" id="closeBtn"></button>
            <h3>
                Privacy Statement
            </h3>
            <span class="PrivacyText">
                De door u verstrekte gegevens worden uitsluitend gebruikt om u de aangeboden informatie of diensten via de Lexus vestigingen van LOUWMAN RETAIL te kunnen aanbieden. Hierbij wordt gehandeld in overeenstemming met de Nederlandse wettelijke regels voor de bescherming van persoonsgegevens.
            </span>

        </div>
    </div>    
    <div id="overlayWrapper2" style="display:none;">
        <div id="overlayContent2">
            <button class="closeBtn" id="closeBtn1"></button>
            <h3>
                Cookies
            </h3>
            <span class="CookiesText">
                De website www.lexusnx.nl plaatst cookies. Cookies zijn kleine tekstbestanden die door een internetpagina op een pc, tablet of mobiele telefoon worden geplaatst. Deze cookies worden gebruikt om deze website beter te laten functioneren en het webbezoek te monitoren, zodat LOUWMAN RETAIL na kan gaan hoeveel mensen de website in een bepaalde periode hebben bezocht. LOUWMAN RETAIL gebruikt deze data alleen geaggregeerd en kan deze niet herleiden tot een pc of individu. Hieronder vindt u een lijst van cookies die geplaatst worden door www.lexusnx.nl en hun functionaliteit.
            </span>

        </div>
    </div>    

---

另一个OverlawRapper的CSS是相同的

如果要将锚定用作按钮，则每次都应防止出现默认行为：

jQuery(document).ready(function() {
    jQuery('#showPopup1').on('click', function(e) {
        jQuery('#overlayWrapper1').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#showPopup2').on('click', function(e) {
        jQuery('#overlayWrapper2').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#closeBtn').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
    jQuery('#closeBtn1').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
});

---

这样，您可以从锚中删除<代码> HRFF＝“JavaScript：无效（0）”<代码>，并将它们替换为它们正在定位的元素的实际<代码> IDS < /代码>：<代码> HRFF =“OyAuthAuthRePAPP1”< /代码> .< /P>您可能想考虑使用CSS类而不是ID，那么你就不会有完全相同的CSS和JavaScript了……所以这一定是一个样式问题——因为你已经完全定位了覆盖，你有没有将任何父元素设置为

position:relative

？使用

parent（）。parent（）

是找到你想要的元素的一种脆弱的方法。如果修改HTML，则必须编辑JS。理想情况下，您的

#overlayWrapper1/2

将有一个CSS类

overlay wrapper

，您可以使用

父类（'.overlay wrapper'）

但不要认为这会对上述行为产生任何影响，如果您要将id用作href，我将更改单击函数以使用href:

jQuery（$（this.attr（'href'））.css（'display'，'block'）；

以及

#closeBtn

和

#closeBtn1

的处理程序也可以合并到单个处理程序中。

#overlayWrapper1{
position:absolute;
top:0;
margin:0;
margin-left:-10px;
padding: 0px;
z-index:1000;
background-image:url('/img/lexus/blk_px.png');
filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
);
}

jQuery(document).ready(function() {
    jQuery('#showPopup1').on('click', function(e) {
        jQuery('#overlayWrapper1').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#showPopup2').on('click', function(e) {
        jQuery('#overlayWrapper2').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#closeBtn').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
    jQuery('#closeBtn1').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
});