使用可点击的div制作书页 [英] Make book pages using clickable divs
本文介绍了使用可点击的div制作书页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张打开的书的图像作为我网站上的主菜单。书中写的每个单词都链接到一个相关的页面。
我想进一步开发它并让它可以让人可以点击页面一角的按钮看看下一页 - 所以所有的信息都在书的不同''页面'上。
问题是我自己教导自己，不知道会是什么这样做的最佳方法。
有没有办法让可点击的div在顶部打开一个新的div？或者有更好的方法吗？
任何建议都会非常感激。
谢谢
ekokaos
I have an image of an open book as the main menu on my website. Each word written in the book links to a related page.
I would like to develop it further and have it so that the person can click a button on the corner of the page to see the next page- so all the information is on different ''pages'' of the book.
The problem is that Im teaching myself as I go along and am not sure what would be the best method of doing this.
Is there a way to make it so that the clickable div opens a new div on top? Or is there a better method?
Any suggestions will be greately appreciated.
Thank you
ekokaos
推荐答案
嗨...
看看下面的简单示例，单击时切换到下一个div目前显示一个:)可能会帮助你解决问题或至少给你一个想法：
[HTML]< html>
< head>
< script type =" text / javascript">
函数init_page（page_id）{
var divs = document.getElementsByTagName（ ''div''）;
for（var i = 0，page; page = divs [i]; i ++）{
page.onclick = next_page;
page.style.display = page.id ==''page_''+ page_id？
''阻止''：''没有';
}
}
function next_page（e）{
if（typeof e ==''undefined''）{
e = window.event;
}
var tgt = typeof window.event ==''undefined''？
e.target：e.srcElement;
var idx = parseInt（tgt.id.match（/ [^ _]
hi ...
have a look at the following simple example, that switches to the next div when clicking the currently showed one :) may that helps with you problem or at least gives you an idea:
[HTML]<html>
<head>
<script type="text/javascript">
function init_page(page_id) {
var divs = document.getElementsByTagName(''div'');
for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.display = page.id == ''page_'' + page_id ?
''block'' : ''none'';
}
}
function next_page(e) {
if (typeof e == ''undefined'') {
e = window.event;
}
var tgt = typeof window.event == ''undefined'' ?
e.target : e.srcElement;
var idx = parseInt(tgt.id.match(/[^_]
/），10）+ 1;
var next_page = document.getElementById（''page_''+ idx）;
tgt.style.display =''none'';
next_page.style.display =''block'';
}
< / script>
< style type =" text / css">
div {
border：1px solid黑色;
}
< / style>
< / head>
< body onload = " init_page（0）;">
< div id =" page_0">
content 1
< / div>
< div id =" page_1">
content 2
< / div>
< div id =" page_2">
content 3
< / div>
< div id =" page_3">
content 3
< / div>
< / body>
< / html>
[/ HTML]
亲切的问候
/), 10) + 1;
var next_page = document.getElementById(''page_'' + idx);
tgt.style.display = ''none'';
next_page.style.display = ''block'';
}
</script>
<style type="text/css">
div {
border: 1px solid black;
}
</style>
</head>
<body onload="init_page(0);">
<div id="page_0">
content 1
</div>
<div id="page_1">
content 2
</div>
<div id="page_2">
content 3
</div>
<div id="page_3">
content 3
</div>
</body>
</html>
[/HTML]
kind regards
谢谢，这听起来就像我一直在寻找的。
我有点卡住了，你能解释一下吗？
我尝试在每个div中添加一个图像来测试它是否随每次点击而改变但是当我点击第一个时屏幕就是这样空白？
对不起，我可能做的事情越来越愚蠢，但我是初学者，随时随地学习。
谢谢
ekokaos
Thank you, that sounds like exactly what Ive been looking for.
I''m a bit stuck tho, could you explain it to me?
I tried adding an image to each div to test whether it changed with each click but when I clicked on the first one the screen just goes blank?
Sorry, Im probably doing something increadibly stupid but Im a beginner and learning as I go.
Thanks
ekokaos
嗨...
看看下面这个简单的例子，单击当前显示的那个时切换到下一个div :)可能对您有所帮助或者有问题至少给你一个想法：
[HTML]< html>
< head>
< script type = " text / javascript">
函数init_page（page_id）{
var divs = document.getElementsByTagName（''div''）;
for（var i = 0，page; page = divs [i]; i ++）{
page.onclick = next_page;
page.style.display = page.id ==''page_''+ page_id？
''阻止''：''没有';
}
}
function next_page（e）{
if（typeof e ==''undefined''）{
e = window.event;
}
var tgt = typeof window.event ==''undefined''？
e.target：e.srcElement;
var idx = parseInt（tgt.id.match（/ [^ _]
hi ...
have a look at the following simple example, that switches to the next div when clicking the currently showed one :) may that helps with you problem or at least gives you an idea:
[HTML]<html>
<head>
<script type="text/javascript">
function init_page(page_id) {
var divs = document.getElementsByTagName(''div'');
for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.display = page.id == ''page_'' + page_id ?
''block'' : ''none'';
}
}
function next_page(e) {
if (typeof e == ''undefined'') {
e = window.event;
}
var tgt = typeof window.event == ''undefined'' ?
e.target : e.srcElement;
var idx = parseInt(tgt.id.match(/[^_]
这篇关于使用可点击的div制作书页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
