Question

我正在寻找一种方法，使多个<div>元素具有某些功能，可以在<div>之间切换，就好像它们是页面一样。我希望有一个“活动”页面，并且当单击某些元素或<a>时，有一种方法可以切换到另一个占据整个页面的div。在任何给定时间，只有一个类似页面的<div>可见。

我知道这可以在jquery中完成，例如使用其div的data-role="page"属性，但是我想知道如何在纯JavaScript和CSS中机械地做到这一点。

这是我写的一个示例，但是它不起作用，它只允许一次过渡，然后陷入困境。

 <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
       <title>Page Divs</title>
       <style>
     .uipage {
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        position: absolute;
        border: 0;
      }
    
      .lightpage {
        background-color: #fcfbd1;
      }
    
      .darkpage {
        background-color: red;
      }
             
       </style>
    </head>
    
    <body>
    <div class="lightpage" id="pageone" name="pagetype">
      <p onclick="switchPages();">Hello! This is page one!</p>
    </div>
    
    <div class="darkpage" id="pagetwo" name="pagetype">
      <p onclick="switchPages();">Hello! This is page two!</p>
    </div>
    
       <script>
         document.getElementById('pageone').style.top = 0;
         document.getElementById('pageone').style.left = 0;
         document.getElementById('pageone').style.width = '100%';
         document.getElementById('pageone').style['min-height'] = '100%';
         document.getElementById('pageone').style.position = 'absolute';
         document.getElementById('pageone').style.border = 0;
       </script>
    
    <script type="text/javascript">
      var currentPage = 1;
      function switchPages() {
        if(currentPage === 1) {
         document.getElementById('pagetwo').style.top = 0;
         document.getElementById('pagetwo').style.left = 0;
         document.getElementById('pagetwo').style.width = '100%';
         document.getElementById('pagetwo').style['min-height'] = '100%';
         document.getElementById('pagetwo').style.position = 'absolute';
         document.getElementById('pagetwo').style.border = 0;
         currentPage = 2;
        } else if(currentPage === 2) {
         document.getElementById('pageone').style.top = 0;
         document.getElementById('pageone').style.left = 0;
         document.getElementById('pageone').style.width = '100%';
         document.getElementById('pageone').style['min-height'] = '100%';
         document.getElementById('pageone').style.position = 'absolute';
         document.getElementById('pageone').style.border = 0;
         currentPage = 1;      
        }
      }
    </script>
    </body>
    </html>

基本上可以过渡到第二页，但是此后将无法使用。我不确定在这里动态更改样式对象是否是个好方法。

Answer 1

在我看来，您只是将样式应用于要显示的<div>，但实际上并没有隐藏其他样式。
您是否尝试过将display: none;应用于您要隐藏的div？
我会在div可见的情况下为div应用所需的样式，然后根据点击的内容将display模式从none更改为block或反之，

Answer 2

发生了几件事。首先，应尽可能避免使用样式。而是使用类，它们可以更好地运行，并且您可以重用这些类。然后，您可以使用

Promise

第二，您将样式添加到目标ID，但没有删除不需要的样式。

我知道您想要纯js，但是您可能还想查找jquery。使用

之类的简单命令，可以使这样的事情变得更加容易

document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');

在div之间切换，它将在纯js中占据整个页面

2 个答案: