简体   繁体   English

如何在单个html文件中添加多个页面

[英]how to add multiple pages in single html file

I want to make a web app in which i have multiple pages i want that when i click on any link it should move to that page i got the code from site it works fine but i want that it does not show like the show Page1 Page but without onclick functions without java script using ancchor tag 我想制作一个我有多个页面的Web应用程序,我希望当我单击任何链接时,它都应该移至该页面,我从网站上获取了代码,它的运行正常,但我希望它不会像显示Page1页面那样显示但是没有onclick函数,没有使用ancchor标记的Java脚本

     <html>
     <head>
      <script>
     function show(shown, hidden) {
     document.getElementById(shown).style.display='block';
      document.getElementById(hidden).style.display='none';
     return false;
     }
    </script>
    </head>
   <body>


   <div id="Page1">
     Content of page 1
     <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
    </div>

    <div id="Page2" style="display:none">
    Content of page 2
     <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
    </div>

   </body>
   </html>

You can use CSS and checkboxes to get such a behaviour as written on this SITE . 您可以使用CSS和复选框获得在此SITE上编写的行为。

The checkbox is the only HTML element which has two different states which can be exported/evaluated by CSS via the :checked property. 该复选框是唯一具有两种不同状态的HTML元素,可以通过CSS通过:checked属性导出/评估该状态。

Cited from http://www.inserthtml.com/2012/04/css-click-states/ : 引用自http://www.inserthtml.com/2012/04/css-click-states/
HTML: HTML:

<form class="clickable"> 
  <label for="the-checkbox">Click Me!</label>
  <input type="checkbox" id="the-checkbox" /> 
  <!-- This is the div we want to appear and disappear -->
  <div class="appear">Some text to appear</div>
</form>

CSS: CSS:

.clickable .appear { 
  display: none;
}

.clickable input:checked ~ .appear {
  display: block;
}

Check out the demo at the bottom of that page. 查看该页面底部的演示。

To select among more than two pages, you could maybe use radio buttons. 要在两个以上的页面中进行选择,可以使用单选按钮。 Not tested, just as an idea ;) 未经测试,只是一个想法;)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM