gpt4 book ai didi

javascript - 如何使用javascript隐藏并让div重新出现

转载 作者:太空宇宙 更新时间:2023-11-04 12:53:09 24 4
gpt4 key购买 nike

我正在尝试制作网页,其中中心有一个正在更改的 div,而不是转到不同的页面。

最终,我希望新的 div 在单击箭头时从右或左流入中心。但首先我想让 div 在单击箭头时出现和消失,但不幸的是这不起作用。

这是我的javascript:

<script>
function changeToHome() {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToJob() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}

function changePageRight() {
var displayValue5 = document.getElementById('mainmain').style.display;
var displayValue5 = document.getElementById('mainmain2').style.display;
var displayValue6 = document.getElementById('mainmain3').style.display;
var displayValue7 = document.getElementById('mainmain4').style.display;

if (document.getElementById('mainmain').style.display == "block") {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
}
else if (document.getElementById('mainmain2').style.display == "block") {
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
}
else if (document.getElementById('mainmain3').style.display == "block") {
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
else if (displayValue8 == block) {}
}
function changePageLeft() {
var displayValue = document.getElementById('mainmain').style.display;
var displayValue2 = document.getElementById('mainmain2').style.display;
var displayValue3 = document.getElementById('mainmain3').style.display;
var displayValue4 = document.getElementById('mainmain4').style.display;

if (displayValue == "block") { }
else if (displayValue2 == "block") {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
}
else if (displayValue3 == "block") {
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
}
else if (displayValue4 === "block") {
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
}
</script>

现在我有几个看起来像这样的 div:

<div id="mainmain4">
<img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;" src="Untitled-22.png" />
<h2> My name </h2>
<p>Hi,</p>
<p>Some text</p>
</div>

使用这些 css 属性:

#mainmain {
float: left;
width: 575px;
display: block;
position: relative;
}

以及所有其他带有 display: none; 的 div,所以我可以将其更改为阻止,将阻止的更改为无。出于某种原因,当我单击激活 changeToX() 函数的菜单按钮后,箭头效果很好。但在此之前,当您第一次访问该网站时,它不会。

谁能解释一下我做错了什么?

最佳答案

您没有告诉浏览器加载时应显示哪些 div。您可以使用 onload为此事件:

<body onload="changeToHome()">

一个附加提示:您可能不想使用 inline JavaScript and CSS .

关于javascript - 如何使用javascript隐藏并让div重新出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26026311/

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