Question

我希望当按钮根据其ID按下相应按钮时显示某些文本块。

当按钮通过src="holylandlogo.png"动画按下时，按钮将根据css文件进行渲染。使用fadein可以使文本保持隐藏状态，直到按下按钮为止。 css可以正常工作，但是Javascript函数无法正常工作。

"display:none;"

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}

.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}

我希望例如按下按钮A，出现ID为<div class="place" id="part7"> <p class="text">text</p> <button class="button2 text" onclick="nextA()">A</button> <button class="button2 text" onclick="nextS()">S</button> <button class="button2 text" onclick="nextD()">D</button> <button class="button2 text" onclick="nextB()">B</button> </div> <div class="place" id="partA"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> <div class="place" id="partS"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> <div class="place" id="partD"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> <div class="place" id="partB"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> </div>的文本块，而没有其他文本块出现。实际发生的情况是partA渲染了所有文本块，而功能nextA和nextS, nextD,甚至都没有加载。

Answer 1

问题是您的元素S，D和B都是A的孩子； S是孩子，D是孙子，B是曾孙。因此，除非A也也可见，否则看不到它们。切换A的可见性后，您还将自动显示所有子项。

要解决此问题，只需添加四个</div>来关闭您的.place元素，使它们成为彼此的兄弟姐妹，而不是三个{{ 1}}。

这可以在下面看到：

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}

.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}

注意：您还想通过添加事件处理程序（代替<div class="place" id="part7"> <p class="text">text</p> <button class="button2 text" onclick="nextA()">A</button> <button class="button2 text" onclick="nextS()">S</button> <button class="button2 text" onclick="nextD()">D</button> <button class="button2 text" onclick="nextB()">B</button> </div> <div class="place" id="partA"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> </div> <div class="place" id="partS"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> </div> <div class="place" id="partD"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> </div> <div class="place" id="partB"> <p class="text">TEXT</p> <form> <input class="text button2 place" type="button" value="" onclick="window.location.href=''" /> </form> </div>）来使用不干扰JavaScript的JavaScript，尽管这是对问题中所演示问题的补充。

Answer 2

在标签末尾添加标签可以解决问题

按下按钮时功能无法正常使用

2 个答案: