如何在单页中创建多页面 [英] How to create a multi page in single page
问题描述
你好，
我想在一个网页上创建一个多页面。
例如
html 1：
Hello,
I want to create a multi page in a single webpage.
For example
html 1:
html 1:
<html>
<head></head>
<body>
<div id='content1'>
content 1
</div>
</body>
</html>
html 2:
<html>
<head></head>
<body>
<div id='content2'>
content 2
</div>
</body>
</html>
但现在我需要这两个html页面
but now i need these two in one html page
<html>
<body>
<div id='content1'>
content 1
click here for content 2
</div>
<div id='content2'>
content 2
click here for content 1
</div>
</body>
</html>
现在页面加载我想将content1显示为页面，如果我点击此处查看内容2，内容具有左和相同时间内容2的1个动画也将产生幻灯片效果。所以内容1隐藏，内容2可见。
获取视图
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html [ ^ ]
示例为图库（image = div content1）
Now page load i want to show content1 as a page and if i click on click here for content 2, content 1 animation with left and same time content 2 will also makes slide effect. so content 1 hides and content 2 visible.
To get view
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html[^]
example as image gallery (image = div content1)
推荐答案
这个问题有两个自相矛盾的观点。首先，你想要实现的不是多页。 页面是浏览器窗口中的一些HTTP内容呈现，根据定义，这只是一个页面。您只是建议可见内容正在发生变化，但这只是一个页面。第二点是：您引用的页面示例与您描述的简单功能无关，它的功能更复杂。那又该怎么回答呢？ :-)
让我先从更改内容div元素开始。你可以使用JavaScript。您可以将所有这些内容都放在HTML文档中，但隐藏除了一个之外的所有内容。为了响应点击事件，您隐藏当前元素并显示其他元素。
这是您更改可见性的方式： http://www.w3schools.com/jsref/prop_style_visibility.asp [ ^ ]。
对于默认可见性（可见），您可以简单地指定visibility为null，但visible也可以。
设置点击事件处理程序的最简单方法可以是这样：
There are two self-contradicting points in this question. First of all, what you want to achieve is not "multi-page". The "page" is some HTTP content rendering in a browser window, and this is only one page, by definition. You just suggest that the visible content is changing, but this is simply one page. Second point is this: the page sample you reference has nothing to do with the simple functionality you described, it's more complicated functionality. So what to answer to? :-)
Let me start with "changing content"divelements. You can use JavaScript. You can simply have all of them in your HTML document, but hide all but one. In response to a click event, you hide current element and show some other one.
This is how you change visibility: http://www.w3schools.com/jsref/prop_style_visibility.asp[^].
For default visibility (visible), you can simply assignvisibilityto null, but "visible" will also work.
The simplest way to set a click event handler could be this:
myElement.onclick = function(eventObject) {
// do something on click
}
要做一些更复杂的事情，比如你引用的例子中所示，你可以先学习实现图像画廊的不同代码示例y： http://bfy.tw/Yki [ ^ ]。
我打赌你会发现很多有趣的例子可以帮助你决定什么你真的想实施。
看看下面的网址。看看你能不能这样做？
http://alvarotrigo.com/fullPage/ [ ^ ]
Have a look at the below URL. See if you can follow that?
http://alvarotrigo.com/fullPage/[^]
尝试使用以下CSS代码
Try using the below CSS code
overflow: scroll;
您可以尝试Overflow-x或overflow-y
You can try Overflow-x or overflow-y
这篇关于如何在单页中创建多页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
