【问题标题】：Inline CSS show/hide div not working内联 CSS 显示/隐藏 div 不起作用
【发布时间】：2014-02-21 05:39:48
【问题描述】：

我有一个很长的（-ish）PHP 脚本，其中包含内联 CSS 来显示和隐藏文本。这是我所拥有的一个示例：

<?php
  echo "<div class='ReqAcctAPI'><img src='ajax-loader2.gif'></div>";
  echo "<style type='text/css'>#ReqAcctAPI { display:visible; }</style>";
...
... (processing of other code on page goes here)
...
  echo "<style type='text/css'>#ReqAcctAPI { display:none; }</style>";
  echo "<font color='#00BB00'><b>*** DONE</b></font><br />&nbsp;<br />";
?>

它会很好地显示图像，但是当它到达第二个样式标签时，它不会隐藏它。

我错过了什么？

【问题讨论】：

display:visible; 不是正确的值。让它display:block;或display:inline;
尝试使用display:block; 而不是display:visible;
感谢您的快速回复.. 我已将其更改为 display:block 但它仍然不会隐藏？

标签： php html css image show-hide

【解决方案1】：

您应该添加 display:block 或 display:inline-block; 而不是可见。可见性和显示是不同的定义来源：http://www.w3schools.com/css/css_display_visibility.asp

回答：

<?php
  echo "<div class='ReqAcctAPI'><img src='ajax-loader2.gif'></div>";
  echo "<style type='text/css'>.ReqAcctAPI { display:block; }</style>";
...
... (processing of other code on page goes here)
...
  echo "<style type='text/css'>.ReqAcctAPI { display:none; }</style>";
  echo "<font color='#00BB00'><b>*** DONE</b></font><br />&nbsp;<br />";
?>

【讨论】：

【解决方案2】：

在您的回答中，您使用 ID“#”选择器来选择您的元素，但您的元素只有一个类。

类选择以点为前缀，例如".ReqAcctAPI"

请注意，将样式内联是不好的做法。

【讨论】：

【解决方案3】：

您可以像这样使用内联 CSS（style='display:block' 用于显示）或（style='display:none' 用于隐藏）

<?php
  echo "<div class='ReqAcctAPI' style='display:block;'><img src='ajax-loader2.gif'></div>";

...
... (processing of other code on page goes here)
...
echo "<div class='ReqAcctAPI' style='display:none;'><img src='ajax-loader2.gif'></div>";
  echo "<font color='#00BB00'><b>*** DONE</b></font><br />&nbsp;<br />";
?>

【讨论】：

感谢您的快速回复.. 我已将其更改为 display:block 但它仍然不会隐藏？
你有class 到你的元素并且你写了#ReqAcctAPIselector 所以去使用Class Selector .ReqAcctAPI
display:block 不会隐藏它会显示。如果你想隐藏使用display:none

【解决方案4】：

您在类中应用属性并在 id 中定义它们。

 <?php
      echo "<div class='ReqAcctAPI'><img src='ajax-loader2.gif'></div>";
      echo "<style type='text/css'>#ReqAcctAPI { display:visible; }</style>";

将 div 标签中的class 更改为id，如：

<div id='ReqAcctAPI'><img src='ajax-loader2.gif'></div>

然后 CSS 到：

#ReqAcctAPI { display:block; }

【讨论】：

【解决方案5】：

试试这个：

<?php
  echo "<div class='ReqAcctAPI' style='display:block'><img src='ajax-loader2.gif'></div>";
...
... (processing of other code on page goes here)
...
  echo "<style type='text/css'>.ReqAcctAPI { display:none; }</style>";
  echo "<font color='#00BB00'><b>*** DONE</b></font><br />&nbsp;<br />";
?>

注意：'ReqAcctAPI' 是一个类而不是 id，所以你需要使用 '.'而不是您选择的“#”。

【讨论】：

【解决方案6】：

Yoy 使用 # 而不是 .风格

#用于id，用于我们使用的类。

修改你的代码

<?php
  echo "<div class='ReqAcctAPI'><img src='ajax-loader2.gif'></div>";
  echo "<style type='text/css'>.ReqAcctAPI { display:block; }</style>";
...
... (processing of other code on page goes here)
...
  echo "<style type='text/css'>.ReqAcctAPI { display:none; }</style>";
  echo "<font color='#00BB00'><b>*** DONE</b></font><br />&nbsp;<br />";
?>

【讨论】：