使用Java Script创建DHTML页面 [英] Using Java Script to create DHTML Pages
问题描述
我的网页中有以下脚本减少到两页。
< script>
功能详情（）
{
document.getElementById（''details''）。style.visibilit y =''visible'';
document.getElementById（''capabilities' '）。style.visi bility =''hidden'';
}
功能（）
{
document.getElementById（''details''）。style.visibilit y =''hidden'';
document.getElementById（''capabilities''）。style.visi bility =''可见'';
}
< / script>
使用以下HTML代码..
< table id ="菜单"边界=" 1 QUOT; width =" 100％">
< tr>
< td>< a href ="＃" onclick =" details（）">详细信息< / a>< / td>
< td>< a href ="＃" onclick =" capabilities（）">功能< / a>< / td>
< / tr>
< / table>
< div id =" details"风格= QUOT;位置：绝对的;可见性：可见;">
< table border =" 0">< caption> DETAILS< / caption>
< tr>< td>名称：< / td>< td>输入名称< / td>< / tr>
< tr>< td>电子邮件：< / td>< td> ;< a
href =" mailto：an ***** @ anydomain.com"> EmailName< / a>< / td>< / tr>
< tr>< td> DOB：< / td>< td>出生日期< / td>< / tr>
< / table>
< / div>
< div id =" capabilities"风格= QUOT;位置：绝对的; visibility：hidden;">
< table border =" 0">< caption> CAPABILITIES< / caption>
< tr>< td> Java脚本< / td>< tr>
< tr>< td> Java脚本< / td>< tr>
< tr> < td> Langauges< / td>< tr>
< / table>
< / div>
我要做的是创建一个简历，你可以在没有
重新加载网页的情况下翻页。我已经使用上面的代码
成功地做到了这一点，但链接在Internet Explorer中不起作用，直到我通过所有页面消失了
。 Netscape和Opera的作品很好！
以上内容包含两页，但我的最终网站将是
大约6到7页。
任何人都可以帮助让第一次加载的链接工作没有
必须浏览所有页面或IE是否有错误？
<很多，谢谢
Dafydd
da ************* @ ntlworld.com （Dafydd）写道：
我的网页中有以下脚本减少到两页。
你的HTML没有验证。
< td>< a href ="＃"的onclick = QUOT;细节（）">详情< / A>< / TD>
当我到达这里时，我猜到问题是当你点击链接时页面
重新加载。为避免这种情况，至少
add; return false;到onclick属性值。
问题是你正在使用链接（< a href = ...>）来获取某些东西
并没有链接到任何东西。那不是最好的设计。你应该使用一个按钮，这就是他们所使用的按钮：点击一下
效果，而链接则意味着将你带到一个新资源。
滥用链接变得可见，因为您没有相关的
信息放入href。所以你在那里放了一些虚拟信息
，并且因为你没有从处理程序返回false，所以
虚拟信息被使用。
你能做的就是写
< a href ="＃details" onclick =" details（）">详细信息< / a>
然后点击将使详细信息可见，并将
屏幕移至ID为id的元素= QUOT;详情" ;.然后链接实际上
是有意义的。
（现在，让我们看看我的猜测是否正确）
我想要做的是创建一个简历，你可以在没有重新加载网页的情况下翻页。我已经使用上面的代码成功完成了这项工作，但链接在Internet Explorer中不起作用，直到我浏览了所有页面。
嗯，不，这不是我预期的问题。我认为。该死的！ :)
不工作的链接（不是非常精确地描述了
问题）在示例中是电子邮件链接，对吗？
好像是后来的（在文档中） ）div正在覆盖它，甚至是隐藏的
，所以你不能点击链接。有一件事对我有用
是将第一个窗格的z-index设置为1.但它只适用于那个
一个。
您的代码设计不能很好地扩展。如果您有十个窗格，那么
将有十个函数，每个函数有十行，即代码大小
窗格数量的二次方。这可以缩短：
---
< script type =" text / javascript">
var currentPane;
函数setVisible（paneId）{
if（currentPane）{
currentPane.style.visibility =" hidden";
currentPane.style.zIndex ="" ;;
}
currentPane = document.getElementById（paneId）;
currentPane。 style.visibility =" visible";
currentPane.style.zIndex =" 1";
}
< / script>
---
然后将链接设为：
---
< a href = "＃细节" onclick =" setVisible（''details''）; return false;">
---
并在页面加载时初始化currentPane： br />
---
< body onload =" setVisible（''details''）">
...
---
（代码未测试）
你还有问题，如果Javascript被禁用，很多
您的页面将无法访问。
任何人都可以帮助获取第一次加载的链接，而无需浏览所有页面或是否有IE的错误？
是和是（我希望这有效，它肯定看起来像一个bug）。
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''没有判断的信仰只会降低精神神圣。 ''
Dafydd写道：我要做的是创建一个简历，你可以在没有
重新加载网页的情况下翻页。我已经使用上面的代码成功完成了这项工作，但链接在Internet Explorer中不起作用，直到我浏览了所有页面。网景和歌剧工作很好！
.....
任何人都可以帮助让链接工作第一次加载而不必浏览所有页面或在那里IE的一个错误？
正如Lasse指出的那样，你应该指定一个z-index并快速修复你的
问题，分配只有第一个div才足够：
< div id =" details" style =" position：absolute; visibility：visible; z-index：+ 1">
这样，所有后续的div都会自动获得这个div的z-index + 1.
JW
" Janwillem Borleffs" < jw@jwscripts.com>写道：
正如Lasse所指出的那样，你应该分配一个z-index并快速解决你的问题，将它分配到第一个div就足够了：
< div id =" details" style =" position：absolute; visibility：visible; z-index：+ 1">
这样，所有后面的div都会自动获得这个div的z-index + 1。 / blockquote>
不。设置此div的z-index对以下
divs没有任何作用（值+ 1相当于1）。
如果您有三个窗格，只需在详细信息上设置z-index即可。不会是b $ b工作。切换到第二个窗格，您将看到它的链接仍然无法工作，因为它们正在被重叠。在第三个窗格中。
这就是为什么我确保在显示每个元素时设置z-index
。
/ L
-
Lasse Reichstein Nielsen - lr * @ hotpop .com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''没有信仰判断只会降低精神神圣。''
I have the following Script in my web page reduce to two pages.
<script>
function details()
{
document.getElementById(''details'').style.visibilit y=''visible'';
document.getElementById(''capabilities'').style.visi bility=''hidden'';
}
function capabilities()
{
document.getElementById(''details'').style.visibilit y=''hidden'';
document.getElementById(''capabilities'').style.visi bility=''visible'';
}
</script>
With the following HTML code..
<table id="Menu" border="1" width="100%">
<tr>
<td><a href="#" onclick="details()">Details</a></td>
<td><a href="#" onclick="capabilities()">Capabilities</a></td>
</tr>
</table>
<div id="details" style="position:absolute; visibility:visible;">
<table border="0"><caption>DETAILS</caption>
<tr><td>Name:</td><td>Enter name</td></tr>
<tr><td>Email:</td><td><a
href="mailto:an*****@anydomain.com">EmailName</a></td></tr>
<tr><td>D.O.B:</td><td>Date of Birth</td></tr>
</table>
</div>
<div id="capabilities" style="position:absolute; visibility:hidden;">
<table border ="0"><caption>CAPABILITIES</caption>
<tr><td>Java Script</td><tr>
<tr><td>Java Script</td><tr>
<tr><td>Langauges</td><tr>
</table>
</div>
What I am trying to do is create a CV where you turn the pages without
reloading the web page. I have successfully done this using the code
above but the links don''t work in Internet Explorer until I have gone
through all the pages. Netscape and Opera Works Fine!
The above consists of two pages for convience but my final site will
be approx 6 to 7 pages long.
Can anybody help get the links working on loading up 1st time without
having to go through all the pages or is there a bug with IE?
Many Thanks
Dafydd解决方案da*************@ntlworld.com (Dafydd) writes:
I have the following Script in my web page reduce to two pages.
Your HTML doesn''t validate.
<td><a href="#" onclick="details()">Details</a></td>
When I got to here, I guessed that the problem is that the page
reloads when you click on the link. To avoid that, at least
add ";return false;" to the onclick attribute value.
The problem is that you are using a link (<a href=...>) for something
that isn''t linking to anything. That is not the best design. You
should use a button, that is what they are there for: click for an
effect, whereas links are meant to move you to a new resource.
The misuse of a link becomes visible because you have no relevant
information to put in the href. So you put some dummy information
there, and because you don''t return false from the handler, that
dummy information is used.
What you could do was to write
<a href="#details" onclick="details()">Details</a>
Then clicking would both make the details visible, and move the
screen to the element with id="details". Then the link actually
makes sense.
(Now, let''s see if my guess is correct :)
What I am trying to do is create a CV where you turn the pages without
reloading the web page. I have successfully done this using the code
above but the links don''t work in Internet Explorer until I have gone
through all the pages.
Hmm, no, that was not the problem I expected. I think. Damn! :)
The link that "don''t work" (not very precise description of the
problem) in the example is the e-mail link, correct?
It seems like the later (in the document) divs are overlaying it, even
while hidden, so you can''t click the link. One thing that works for me
is to set the z-index of the first pane to 1. It only works for that
one, though.
Your code design doesn''t scale very well. If you had ten panes, you
would have ten functions with ten lines each, i.e., code size
quadratic in the number of panes. That can be done shorter:
---
<script type="text/javascript">
var currentPane;
function setVisible(paneId) {
if (currentPane) {
currentPane.style.visibility = "hidden";
currentPane.style.zIndex = "";
}
currentPane = document.getElementById(paneId);
currentPane.style.visibility = "visible";
currentPane.style.zIndex = "1";
}
</script>
---
and then make the links as:
---
<a href="#details" onclick="setVisible(''details'');return false;">
---
and initialize the currentPane when the page has loaded:
---
<body onload="setVisible(''details'')">
...
---
(code not tested)
You still have the problem, that if Javascript is disabled, a lot of
your page will not be accessible.
Can anybody help get the links working on loading up 1st time without
having to go through all the pages or is there a bug with IE?
Yes and yes (I hope this works, and it definitly looks like a bug).
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
Dafydd wrote:What I am trying to do is create a CV where you turn the pages without
reloading the web page. I have successfully done this using the code
above but the links don''t work in Internet Explorer until I have gone
through all the pages. Netscape and Opera Works Fine!
.....
Can anybody help get the links working on loading up 1st time without
having to go through all the pages or is there a bug with IE?
As Lasse has pointed out, you should assign a z-index and to fix your
problem quikly, assigning it to the first div only will be sufficient:
<div id="details" style="position:absolute;visibility:visible;z-index:+1">
This way, all following divs will automatically get this div''s z-index + 1.
JW
"Janwillem Borleffs" <jw@jwscripts.com> writes:
As Lasse has pointed out, you should assign a z-index and to fix your
problem quikly, assigning it to the first div only will be sufficient: <div id="details" style="position:absolute;visibility:visible;z-index:+1">
This way, all following divs will automatically get this div''s z-index + 1.
Nope. Setting the z-index of this div does nothing for the following
divs (the value "+1" is equivalent to "1").
If you have three panes, just setting z-index on "details" won''t
work. Switching to the second pane, you will see that its links still
doesn''t work, because they are being "overlayed" by the third pane.
That is why I made sure to set the z-index of each element when it
was displayed.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
这篇关于使用Java Script创建DHTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
