带有style =' display:none;'的div标签不工作

时间:2016-01-29 18:19:48

标签: javascript jquery html css

所以,我试图隐藏一个完整的div,直到用户点击一个按钮。我尝试设置display:none;但它不起作用。我尝试设置display:none !important;,但这也不起作用。我尝试使用

$(document).ready(function(){
jQuery('#div').hide();
});

但它不起作用..下面是我的代码。任何帮助将不胜感激。

<div name="Head">
    <div id="first_box" align=right>
        <input type="button" id="get_preview" onClick="bringPreview()" value="Generate Preview"/>
        <input type="button" id="get_code" onClick="bringCode()" value="Generate Code"/>
    </div>
</div>
<script>
   function bringPreview() {
        jQuery('#batchemail').toggle();
   }

   function bringCode() {
        jQuery('#batchemail').hide();
        jQuery('#batchemailcode').toggle();
   }


</script> 
<div id="batchemailcode" style="display: none;">
    <xmp> <p>Hello</p>
    </xmp>
</div>
<div id="batchemail" style="display:none;">
    <body style="background:#f6f6f6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
    <div style="background:#f6f6f6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td align="center" valign="top" style="padding:20px 0 20px 0">
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="20" border="0" width="650" style="border:1px solid #E0E0E0;">
            <!-- [ header starts here] -->
                <tr>
                    <td style="width:200px; height:70px; float:left;">
                            <a href="{{store url=""}}"><img src="{{ logo }}"
                                    alt="{{var logo_alt}}" style="margin-bottom:10px; width:299px; height:62px" border="0"/> </a></div>
                        <div style="width:240px; float:right; font-size: 12px;text-align:right; color: #222222;">Subheader subject line<br/> <a href="{{ url }}" style="color: #222222; margin-top: 10px;"><span style="font-size: 12px;">View The Online Version</span></a>
                    </td>
                </tr>
            <!-- [ middle starts here] -->          
                <tr>
                    <td valign="top">
                        <div style="text-align: center; font-size: 14px; text-decoration: none; color: #222222; padding: 10px 0 10px 0; margin-bottom: 5px; background-color: #cccccc;">
                            <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Appliances</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Furniture</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Bed &amp; Bath</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Lighting</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Rebates</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Scratch &amp; Dent</a>
                        </div>

                        <hr style="border:1px; color:#cccccc; border-style:dotted;" />

                    <!--<div class="email-large-banner" style="width: 640px; border: 1px solid #e0e0e0; margin-top: 5px; margin-bottom: 10px;">-->
                    <!--    <a href="<?php echo $link ?>"><img src="<?php echo $image?>" alt="<?php echo $brand?>" /></a>   -->
                    <!--</div>-->
    <?php elseif($counter == 2):
            foreach ($imagesByRow as $row => $images):
            $count = 1;
            foreach($images as $image):
                $link = $model->getAllLinks($rowPositions[$row], $count);
                $sku = $model->getAllSkus($rowPositions[$row], $count);
                //Mage::log($link); ?>
                    <div class="email-two-column" style="width: 295px;">
                        <a href="<?php echo $link ?>"><img src="<?php echo $image?>" alt="<?php echo $brand ?>" /></a>
                    </div>
            <?php endforeach ?>
            <?php endforeach?>
            <?php endif ?>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
</div>
</body>
</div>

1 个答案:

答案 0 :(得分:1)

您必须明确自己的目标。 “#div”试图以id =“div”为目标。它在我看来你试图用id =“batchemailcode”隐藏div。如果是这种情况,请尝试:

$("#batchemailcode").hide();

此外,所有div都需要位于<body>标记内。您似乎只复制了代码的底部部分而忽略了顶部的正文,这对我们来说很合适,但我在底部看到结尾</div>标记后面的结尾</body>标记。请注意,所有div都必须在<body>标记内。