Question

我正在构建一个网站，我必须根据用户选择的选项更改div的内容。当用户单击锚点onclick事件处理程序时，正确地更改div，但只是一瞬间。我不明白代码有什么问题。这是代码：

<div id="main-content">
   <p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p>
   <a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a>
   <a href="" onClick="addStudent();" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a>
</div>

<script type="text/javascript">
   function addStudent(){
      d1 = document.getElementById('main-content');
      d2 = document.getElementById('add-student');
      d3 = document.getElementById('delete-student');
      d4 = document.getElementById('para');
      d2.style.display = "none";
      d3.style.display = "none";
      d4.style.display = "none";    

      d1.innerHTML = "<p>Hello World</p>";
}
</script>

任何帮助将不胜感激。

Answer 1

您的主播的默认行为是将您重定向到新页面。

从函数返回false并单击处理程序以防止这种情况。

function addStudent() {
  d1 = document.getElementById('main-content');
  d2 = document.getElementById('add-student');
  d3 = document.getElementById('delete-student');
  d4 = document.getElementById('para');
  d2.style.display = "none";
  d3.style.display = "none";
  d4.style.display = "none";

  d1.innerHTML = "<p>Hello World</p>";
  return false;
}

<div id="main-content">
  <p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p>
  <a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a>

  <a href="" onClick="return addStudent();" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a>

</div>

Answer 2

运行addStudent()代码后（在Delete Student按钮上），点击事件通过加载<a href=""属性中指定的地址“完成” - 在这种情况下，它是空白的，所以页面刚重新加载。从false返回onclick以阻止此操作。

function addStudent(){
d1 = document.getElementById('main-content');
d2 = document.getElementById('add-student');
d3 = document.getElementById('delete-student');
d4 = document.getElementById('para');
d2.style.display = "none";
d3.style.display = "none";
d4.style.display = "none";  

d1.innerHTML = "<p>Hello World</p>";

}

<div id="main-content">
<p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p>
<a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a>
<a href="" onClick="addStudent(); return false;" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a>
</div>

onclick事件不会永久保留更改

2 个答案: