Question

我是JavaScript的新手，只是涉足编辑而不是创作。我正在尝试创建一个按钮，当点击时隐藏div，同时显示隐藏的div。

我已经走到这一步了，我很确定第一部分正在传递，即。

onclick="document.getElementById('page1').style.display='none'";`

但不是第二个

"document.getElementById('page2').style.display='block'";

完整代码

<html>
   <head>
      <meta charset="utf-8">
      <style>
         #page1 {
         display: block;
         }
         #page2 {
         display: none;
         }
      </style>
   </head>
   <body>
      <div id="page1"> This is page 1
         <button type="button" 
         onclick="document.getElementById('page1').style.display='none'";"document.getElementById('page2').style.display='block'";>link to page 2</button>
      </div>
      <div id="page2"> This is page 2
         <button type="button" 
         onclick="document.getElementById('page2').style.display='none'";"document.getElementById('page1').style.display='block'";>link to page 2</button>
      </div>
   </body>
</html>

Answer 1

您可以在一次调用中编写多个JS命令，您不必为此添加多个引号。所以所有命令都在一对引号中。

 <html>
<head>
<meta charset="utf-8">
<style>
#page1 {
    display: block;
}
#page2 {
    display: none;
}
</style>
</head>

<body>
<div id="page1"> This is page 1
  <button type="button" 
onclick="document.getElementById('page1').style.display='none'; document.getElementById('page2').style.display='block'";>link to page 2</button>
</div>
<div id="page2"> This is page 2
  <button type="button" 
onclick="document.getElementById('page2').style.display='none'; document.getElementById('page1').style.display='block'";>link to page 2</button>
</div>
</body>
</html>

通过javascript按钮传递多个元素更改

1 个答案: