PHP 页面未使用可见性 :none or display:none 隐藏 DIV

Question

我正在处理的 PHP 页面可以在多种状态下加载，在默认状态下，我需要一个 DIV 层可见而另一个不可见 - 反之亦然。 该脚本有 javascript 备份来做同样的事情，但我需要 css 来为查看禁用 javascript 的页面的人工作。

第一个 DIV 的代码工作正常:

<pre><</pre>div name="MoreDiv" ID="MoreDiv" style="position: absolute;top: 10px; left: 15px;  width: 95%; font-size:1.3em; 
<?php
if(isset($_GET['page']))
{
$ipi = getenv("REMOTE_ADDR");
$u = getenv ("HTTP_REFERER");
$httpagenti = getenv ("HTTP_USER_AGENT");

$page = $_GET['page'];
switch($page)
{
case 404:
{echo '';
break;}

default:
{ ?>

<?php }

break;}
} 
else { //
?>visibility:none; display:none;<?php }
?>">

... 所以您认为对于另一个 DIV，当在 URL 中设置 ?page 变量时需要隐藏它，将“visibility:none; display:none;” php 输出默认值中的属性会起作用——有点像这样:

div name="PhotoText" ID="PhotoText" style="position: absolute;top: 15px; left: 15px; width: 400px; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; <?php
if(isset($_GET['page']))
{$page = $_GET['page'];
switch($page)
{
case "test":
{?>
visibility:none; display:none;

<?php
break;}

default:
{ ?>
visibility:none; display:none;

<?php }

break;}
}   

else { //
?><?php }
?>">

但是由于一些奇怪的和非常奇怪的原因，DIV 仍然显示!......并且它一直可见，直到页面完全加载并且“body onload”标签中的 javascript 开始隐藏它。我不能使用 PHP 将默认 URL 变量的 DIV 层保持空白，因为有 javascript 链接需要它存在才能加载内容....所以我需要一种非 JS 方式来隐藏该层，但以这种方式，可以使用 JS 使其再次可见!

Answer 1

确实有多种方法可以实现这一点。首先，从不，永远，在一个中插入一个if和一个switch类型的逻辑问题中的属性值。食谱，遇到灾难。

关于visibility对比display问题，这个 QA 实际上很好地描述了它:

http://webdesign.about.com/od/css/f/blfaqhidden.htm

或多或少，visibility 仍然保持它在文档流中的“空间”，而 display 影响它的流(包括完全删除它)。容易混淆，完全不同的概念。

这是一个 demo , 和 source markup和 CSS。

<div id="wrapper">
    <div id="novisibility" class="test">
        <p>Visiblity<br>Will you see me?<br>Will I still be "there"?</p>
    </div>
    <div id="nodisplay" class="test">
        <p>Block<br>Will you see me?<br>Will I disappear?</p>
    </div>
    <p id="buttons">
        <button type="button" id="visibility">Toggle Visibility</button>
        <button type="button" id="display">Toggle Display</button>
    </p>
</div>

#wrapper.hide #nodisplay {
    display: none;
}
#wrapper.invisible #novisibility {
    visibility: hidden;
}

Javascript 正在切换 #wrapper 上的 .hide 和 .novisibility 类。

我建议使用模板模式，将逻辑与标记/显示层分开。例如:

page.php

<?php

// ... other stuff

if (isset($_GET['page'])) {
    $page = $_GET['page'];

    switch($page) {
        case "test":
           $cls = " NoDisplay";
        break;
        default:
           $cls = " Highlight";
        break;
    }
}

// ... other stuff

?>

在你的 CSS 中定义它的地方(如果可以的话，不要在 style 属性中):

/assets/css/site.css

.PhototextContent.NoDisplay {
    display: none;
}
.PhototextContent.Highlight {
    background: yellow;
    display: block;
}

docPagePhotoInline.tpl

<!-- Other photo stuff, I presume. -->
<div id="PhotoText" class="PhotoTextContent<?php echo $cls; ?>">Your content</div>

我还想知道您是否正在重用那个 id 值；你should (can) only have one unique id per page .如果您需要覆盖多个元素的内容，请使用 class 名称按 class 对元素进行分组。另请注意，我认为 div 中的 name 仍然有效，但很少有人使用。使用 id 来唯一标识一个元素。

那么你认为哪个更容易阅读呢？我认为不难看出我在这里做什么，但需要仔细看看你所拥有的，然后再挠头。您的代码应该表达意图；感觉良好并且当您查看它时感觉正确的代码并不总是伟大的代码，但不优雅的鞭打格式通常表明代码可能存在问题。把它想象成一个花园；一个精心照料、井井有条的花园比一个井井有条的花园更具吸引力。

所以我至少会实现一个基本的模板方法。那里有几个不错的教程，比如 this one .我想试试 Mustache for PHP很快，但还有其他人喜欢 Smarty , Flexy , Twig , 和 Dwoo .请记住，PHP 本身可以用作模板系统，并且大多数模板系统将模板编译成 PHP 或字节码。您只需要注意将逻辑与 View 或显示层分开即可。

不过，您应该将它们与一种方法配对，所以我建议使用一个使用 MVC pattern 的框架.那里有很多，比如 CodeIgniter , TinyMVC , Kohana , Cake等。这看起来很合理:

http://phpsavant.com/

不过，尽量不要一个人在那里闲逛太多。