[英]Hide/Show HTML content using PHP
我对PHP还是很陌生,我想让一段PHP代码在HTML文件中运行。
我有一个下拉菜单。 如果用户选择一项,则应显示其他字段。 因此,我希望他们仅在他们从下拉菜单中选择该项目时显示。 我试图根据该下拉项的值选择它。 我尚未在PHP脚本中声明任何PHP值。 这一切都在HTML中。
我知道使用jquery,您必须在运行脚本之前引入jquery库。 我是否也需要使用PHP来做到这一点?
这是我要运行的代码:
先感谢您!
html file
<?php
if ($dropmenuValue == specificDropDownOption) {
?>
<div>
-conditional content-
</div>
<?php
}
?>
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/
您可以尝试使用此方法...在PHP中使用HTML时
#item { display: block;}
#itme.active { display:none }
当页面被加载/重新加载时,类似的东西将起作用。
<?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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.