单击任何更改的页面[关闭]答案

【问题标题】：click in anywhere changed page [closed]单击任何更改的页面[关闭]
【发布时间】：2020-08-08 18:07:02
【问题描述】：

我想了解如何通过单击此站点https://weareundefined.be/ 来转换到站点的另一个页面

了解到使用了这个库https://revealjs.com/

我看到这个revealjs.com库作为一个滑块工作，但是当单击按钮时它会翻转页面，我可以以某种方式向其中添加代码，以便当我单击任意位置时页面会翻转 p.s 刚开始学js

也许有人会告诉我一些事情

【问题讨论】：

如help center中所述，对于 Stack Overflow 而言，“他们是如何做到的”之类的问题实在是太宽泛了
1) 您不需要revealjs.com 库即可通过点击更改页面。 2）他们不会进入新页面。只是同一页面上的不同位置。 3）你到底想做什么，并显示一些你尝试过的代码
@DCR 你能更详细地描述一下怎么做吗？如果不困难
@DCR 我希望页面的填充可以像在本网站上的任何地方一样一键更改weareundefined.be
1) 创建所有不同的部分，每个部分都有一个唯一的 ID。 2）隐藏所有带有显示CSS的部分：无。 3) 在正文 4) 中添加一个单击事件侦听器，在单击功能切换显示所见内容，即将当前部分设置为 display:none 并将下一部分设置为 display:block

标签： javascript html jquery css web

【解决方案1】：

document.addEventListener("click",myClick)
var divs= document.getElementsByClassName('section')
for(let i = 0;i<divs.length;i++){
   divs[i].style.display='none'
}
divs[0].style.display='block'
var colors=['green','red','blue']


function myClick(){
   var currentId;
   for(let i = 0;i<divs.length;i++){   
   
      if(divs[i].style.display == 'block'){
         currentId = i;
         divs[i].style.display='none'
      }    
   }
   divs[(currentId + 1) % divs.length].style.display='block';
   document.getElementsByTagName('body')[0].style.backgroundColor=colors[(currentId + 1) % divs.length];

}

<div id='s1' class ='section'>section 1</div>
<div id='s2' class ='section'>section 2</div>
<div id='s3' class ='section'>section 3</div>

【讨论】：