使用PHP隐藏/显示HTML内容

时间:2014-10-01 22:10:39

标签: php html html5 conditional-statements

我是PHP的新手,我正在尝试在我的HTML文件中运行一段PHP代码。

我有一个下拉菜单。如果用户选择一个项目,则应显示其他字段。所以,我希望他们只有在从下拉菜单中选择该项目时才会显示。我试图根据该下拉项的值选择它。我没有在PHP脚本中声明任何PHP值。这都是HTML格式。

我知道使用jquery,你必须在运行脚本之前插入jquery库。我是否还需要使用PHP?

以下是我尝试运行的代码:

提前谢谢!

html file

<?php
  if ($dropmenuValue == specificDropDownOption) {
?>
  <div>
    -conditional content-
  </div>
<?php
  }
?>

3 个答案:

答案 0 :(得分:3)

关于PHP和其他服务器端语言的一个主要问题是,一旦它们呈现页面,它们就会关闭,而这就是它。他们之后无能为力。

你需要在这里求助于客户端,可能最简单的方法是将PHP变量的值添加到适当的JavaScript变量中,然后从那里获取它。您还需要呈现所有可能的内容,并仅显示您需要的内容。

因此,在您的情况下,您可以创建一个CSS类来表示隐藏的内容,然后使用JavaScript来隐藏/显示标记的不同部分。请注意,所有隐藏的代码(由PHP呈现,但由CSS隐藏)仍然可以在页面源中看到,所以如果你有任何敏感的东西,你应该肯定通过进行AJAX调用来做到这一点加载部分内容或常规页面重定向/导航。


修改

以下是我为您制作的一个非常简单的示例,了解如何显示/隐藏内容:

HTML(部分可以由PHP呈现,当然)

<div id="content1" class="content">Hey</div>
<div id="content2" class="content hidden">There</div>
<div id="content3" class="content hidden">World</div>
<hr />
<button onclick="show(1)">Show 1</button>
<button onclick="show(2)">Show 2</button>
<button onclick="show(3)">Show 3</button>

JS

function show(id) {
    // select all the content divs
    var allDivs = document.getElementsByClassName('content');
    // iterate over them and add a hidden class to each
    for (var i = 0; i < allDivs.length; i++){
        allDivs[i].classList.add('hidden');
    }
    // finally, remove the hidden class from the one we referenced
    document.getElementById('content' + id).classList.remove('hidden');
}

在此处查看此行动:http://jsfiddle.net/f0onk7bk/

答案 1 :(得分:0)

您可以尝试使用此功能......在PHP中使用HTML

#item { display: block;}


#itme.active { display:none  }

答案 2 :(得分:0)

当页面加载/重新加载时,这样的东西会起作用......

<?php

  if(isset($_POST['dropdown_name_here']) && $_POST['dropdown_name_here'] == "specificParameter")
  {
     echo("<div id='condition_one_div'> ... </div>");
  }
  else
  {
    echo("<div id='condition_two_div'> ... </div>");
  }

?>

...但我想你想要用于动态内容的JavaScript。

var div = document.getElementById('div_name_here');
var dropdown = document.getElementById('dropdown_name_here');
if(dropdown.value == "specificParameter")
{
    //add/show content for div here
}
else
{
    //hide content for div here
}

这就是你要找的东西吗?

<select id='dropdown_name' onchange='if(this.value == "parameter"){ document.getElementById("div_name").style.display = "block"; }else{ document.getElementById("div_name").style.display = "none"; }' >
</select>