发表新帖
发表新帖

Multiple distinct pages in one HTML file

后端 未结
关注
12 996
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-12-04 10:05

Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:

Page 1 : cl
相关标签:
12条回答
  • 温柔的废话
    2020-12-04 10:49

    It is, in theory, possible using data: scheme URIs and frames, but that is rather a long way from practical.

    You can fake it by hiding some content with JS and then revealing it when something is clicked (in the style of tabtastic).

    0 讨论(0)
  • 悲&欢浪女
    2020-12-04 10:51

    going along with @binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation

    update on the jsfiddle

    Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click", 
  function(e){
    Array.from(document.querySelectorAll("a"))
    .map(x => x.classList.remove("active"));
    e.target.classList.add("active");    
  }
));
    0 讨论(0)
  • [愿得一人]
    2020-12-04 10:54

    Let's say you have multiple pages, with id #page1 #page2 and #page3. #page1 is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:

    document.location.hash = "#page1";

    Then the next thing you want to do is place some links in your document to the different pages, like for example:

    <a href="#page2">Click here to get to page 2.</a>

    Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style> element:

    <style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
    0 讨论(0)
  • 情书的邮戳
    2020-12-04 10:56

    JQuery Mobile has multipage feature. But I am not sure about Desktop Web Applications.

    0 讨论(0)
  • 说谎
    2020-12-04 10:57

    Screen Rec

    You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.

    Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.

    0 讨论(0)
  • 广开言路
    2020-12-04 10:57

    This is kind of overriding the thing of one page, but... You could use iframes in HTML.

    <html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>

    And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.

    0 讨论(0)
 看不清?
提交回复
热议问题