gpt4 book ai didi

javascript - 需要按顺序单击时显示/隐藏 Div

转载 作者:行者123 更新时间:2023-12-01 03:13:35 26 4
gpt4 key购买 nike

我修改了我在网上找到的脚本,但正在努力让它以我想要的方式显示。我不确定如何修改脚本来完成以下任务。

当网页打开时仅显示:

Click on links below to find the mayor of your city
States

当用户单击“States”时,仅显示:

Select a State
Alabama
Texas
California

当用户单击阿拉巴马州时,仅显示以下内容:

Select a City
Birmingham
Auburn
Montgomery

当用户单击伯明翰时,仅显示以下内容:

The mayor of Birmingham Alabama is William Bell

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p><b>Click on links below to find the mayor of your city</b></p>

<p id="demo" onclick="myFunction('myDIV')">States</p>
<div id="myDIV">
<p><b> Select a State</b></p>
<p id="demo" onclick="myFunction('myDIV2')">Alabama</p>
<p id="demo" onclick="myFunction(myDIV3')">Texas</p>
<p id="demo" onclick="myFunction(myDIV4')">California</p>
</div>
<div id="myDIV2">
<p><b>Select a City</b></p>
<p id="demo" onclick="myFunction('myDIV2A')">Birmingham</p>
<p id="demo" onclick="myFunction('myDIV2B')">Auburn</p>
<p id="demo" onclick="myFunction('myDIV2C')">Montgomery</p>
</div>
<div id="myDIV2A">
<p><b>The mayor of Birmingham Alabama is William Bell</b></p>
</div>

<script>
function myFunction(div) {
var x = document.getElementById(div);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>

</body>
</html>

最佳答案

我可以为您编写可以用于此目的的代码,但我认为您的目标是学习如何自己执行此操作,因此我将尝试解释此类代码中发生的情况,并且希望能让您了解您似乎缺乏编写此类代码的能力。首先,class 是您可以拥有多个的类,id 是您只能拥有一个的类。

您的代码在很多行中都有 id=demo,而这不是您可以做的事情。如果您有很多类,则必须使用它。 Id 用于从其余项目中选择一个特定项目,因此 id 必须始终是唯一的。但是,当您稍后需要从代码中的某个位置选择该特定项目时,您只需为该项目提供一个 id 即可。

var myDiv = selectElementById("myUniqueDiv"); 

上面的代码将选择一个具有特定 ID 的特定 div。 myDiv 变量现在保存该 div。

如果我说:

var allDivs = selectElemetnsByClassName("myDivs");

我可以选择具有特定类名的所有 div。 allDivs 变量有点像我选择的所有元素的列表。

元素可以属于一个或多个类,但只有一个元素可以使用特定的 id。

当您选择其他元素内的元素时,例如 div 内的所有段落,您可以创建变量并首先存储主 div,然后使用该变量(保存它的所有元素)从内容中进一步选择在它里面。

var citys = document.getElementById('citys'); // select main div
citys.getElementsByTagName("p"); // selecting all p elements in it

然后您可以将其设置为显示或不显示。首先您可以将所有元素设置为隐藏,然后您可以只显示其中被单击的一个。

citys.style.display = "none"; 

上面的行隐藏了从城市 div 中选择的所有 p。

function myFunction(selectedCity){
document.getElementsById( selectedCity ).style.display = "block";

}

最后一行使用 id 选择特定城市并使其可见。 myFunction() 声明中括号中的内容(这里我选择了City)成为一个变量,用于保存调用该函数时所提供的内容。我用它来选择我想要显示的城市。

建议:我会为此使用下拉列表,而不是隐藏和取消隐藏元素。

我希望这足以解释您的代码,以便您了解如何自己编写此类代码。

关于javascript - 需要按顺序单击时显示/隐藏 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45679526/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com