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

标签 javascript html css onclick

我是 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>

最佳答案

您可以在一个调用中编写多个 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 - 通过 javascript 按钮传递多个元素更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23545484/

相关文章:

javascript - 如何定义回调函数并稍后触发?

javascript - 如何从 href 调用 javascript 函数?

javascript - 如何有条件地隐藏对象数组中的对象?

javascript - ERR_TOO_MANY_REDIRECTS : Is my code locked in a loop?

javascript - 控制浏览器选项卡索引

cocos2d-html5中的html5 mousemove事件

css - 当我尝试在 IE 中查看我的 jqgrid 时,它在标题和表格之间出现空白,如何解决这个问题?

javascript - execCommand 向我的元素添加不需要的样式

css - 模态外的 Bootstrap 模态正文内容

html - 左对齐单词,但保持一个居中