html隐藏和显示div的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html隐藏和显示div的问题相关的知识，希望对你有一定的参考价值。
html页面有一个<p>和两个<div>
想通过点击<p>切换div。
例如点击【显示d1】就隐藏d2并显示d1，同时<p>的文字=“显示d2”。
再次点击【显示d1】就隐藏d1并显示d2，同时<p>的文字=“显示d1”。
我要具体代码？谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d1,#d2
background:#F10D11;
width:200px;
height:100px;
</style>
</head>
<body>
<p>显示d1</p>
<div id="d1">
<p>d1d1d1d1d1d1d1d1d1d1</p>
</div>
<div id="d2">
<p>d2d2d2d2d2d2d2d2d2d2</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d1,#d2
background:#F10D11;
width:200px;
height:100px;
#d2display:none;
</style>
</head>
<body>
<p onclick="javascript:change(this);">显示d2</p>
<div id="d1">
<p>d1d1d1d1d1d1d1d1d1d1</p>
</div>
<div id="d2">
<p>d2d2d2d2d2d2d2d2d2d2</p>
</div>
<script>
function change(obj)
if(obj.innerHTML == '显示d2')
obj.innerHTML = '显示d1';
document.getElementById('d1').style.display = 'none';
document.getElementById('d2').style.display = 'block';
else
obj.innerHTML = '显示d2';
document.getElementById('d1').style.display = 'block';
document.getElementById('d2').style.display = 'none';
</script>
</body>
</html> 参考技术A <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d1,#d2
background:#F10D11;
width:200px;
height:100px;
#d2
display: none;
#p2
display: none;
</style>
</head>
<body>
<p id="p1">显示d1</p>
<p id="p2">显示d2</p>
<div id="d1">
<p>d1d1d1d1d1d1d1d1d1d1</p>
</div>
<div id="d2">
<p>d2d2d2d2d2d2d2d2d2d2</p>
</div>
</body>
<script type="text/javascript">
var p1 = document.getElementById("p1")
var p2 = document.getElementById("p2")
var d1 = document.getElementById("d1")
var d2 = document.getElementById("d2")
p1.onclick = function()
d1.style.display = "none"
d2.style.display = "block"
p1.style.display = "none"
p2.style.display = "block"
p2.onclick = function()
d1.style.display = "block"
d2.style.display = "none"
p1.style.display = "block"
p2.style.display = "none"
</script>
</html> 参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script>
function show(obj)
if(obj == 2)
$("#d1").hide();
$("#d2").show();
$("#p").text('显示d2');
$("#p").attr('onclick', 'show(1)');
if(obj == 1)
$("#d1").show();
$("#d2").hide();
$("#p").text('显示d1');
$("#p").attr('onclick', 'show(2)');
</script>
<style>
#d1,#d2
background:#ccc;
width:200px;
height:100px;
</style>
</head>
<body>
<p onclick="show(2);" id="p">显示d1</p>
<div id="d1">
<p>d1d1d1d1d1d1d1d1d1d1</p>
</div>
<div id="d2" style="display:none;">
<p>d2d2d2d2d2d2d2d2d2d2</p>
</div>
</body>
</html>
单击提交按钮后，PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div
【中文标题】单击提交按钮后，PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div【英文标题】：PHP file and Javascript function doesn't capture Html div id to show hidden div after clicking submit button 【发布时间】：2022-01-11 19:12:00 【问题描述】：我在index.php 中有这个 div
<div class="class" id="ScoreResult" style="display:none;">
我在seosystem/controller/youtubedata.php 中有这个功能，我尝试使用 Js 它不起作用所以我希望当用户提交按钮时它显示 div 以显示数据
if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url']) && isset($_GET['submit']))
/* echo "</br >" ;
echo $input_Url_data . "Button clicked" ; */
$id_position = strstr($input_Url_data,"=");
$id_position = trim($id_position, "=" );
// the alert works normally
echo '<script> alert("heelo"); </script>';
// this part that trying to show the div doesn't work
echo '<script type="text/JavaScript">
function showtable1()
document.getElementById( "ScoreResult").style.display = "block";
showtable1();
</script>'
;
echo "<style type=\"text/css\"> #ScoreResult display:block;</style>";
这是输入的形式和按钮，我不确定我应该进行操作index.php 还是seosystem/controller/youtubedata.php
<form class="d-flex justify-content-center " method="GET" action="index.php">
<div class="input-group ">
<input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
<input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
</div>
</form>
【问题讨论】：
表单元素是一个链接，提交表单会导航到表单的action 属性指向的 URL（或该 URL 返回的任何内容）。如果未定义action，则使用页面的当前位置。
@Teemu 表单正在运行，功能也在运行，但是这段用于显示 div 的特定代码根本不起作用
我什至尝试过 index.php 本身现在也能正常工作
表单中的action属性指向index.php，youtubedata.php与问题有什么关系？
【参考方案1】：
将此代码添加到您的 index.php 文件中。这就是您有选择地显示和隐藏 ScoreResult div 的方式。希望它对你有用。
<?php
// This part should be added to the php section at the top of the page
// Start by setting the $url_set status to 0
$url_set = 0;
if (isset($_GET['url']))
// Now we set the $url_set status to 1
$url_set = 1;
?>
<div class="class" id="ScoreResult"></div>
<!--This section links the $url_set status to the code-->
<input type="hidden" value="<?php echo $url_set ?>" id="url-status">
<!--Replace your JS section with this-->
<script>
function showtable1()
const
url_status = document.querySelector('#url-status').value,
dsp_status = url_status == 1 ? 'block' : 'none'
document.getElementById("ScoreResult").style.display = dsp_status;
showtable1();
</script>
【讨论】：
我特别喜欢这个想法，我是类中另一个文件中的 php 代码，但是问题是代码排列，当我在上面的 php 脚本中显示它时它会下降并再次隐藏它跨度> 现在可以用了吗？ 是的，它正在工作以上是关于html隐藏和显示div的问题的主要内容，如果未能解决你的问题，请参考以下文章