2009-11-06 23 views
0

我有一些JavaScript在页面的头部控制用户单击缩略图的图像库图像和一个更大的图像和一些文本显示在一个跨度。每页有10个缩略图,我需要了解如何在页面加载时将第一个缩略图的隐藏跨度设置为“阻止”。需要设置1跨度的风格显示:在页面加载块为由跨度的设置显示的图像库:无


<script type="text/javascript"> 
function hideSpan(spanName) { 

var obj = document.getElementById(spanName); 
obj.style.border="0px"; 
obj.style.color="#fff"; 
obj.style.display="none"; 
obj.style.left="333px"; 
obj.style.padding="0"; 
obj.style.position="absolute"; 
obj.style.top="55px"; 
obj.style.width="244px"; 
} 

function showSpan(spanName) { 

var spanEl, count = 1; 
while(spanEl = document.getElementById('link' + count++)){ 
spanEl.style.display = 'none'; 
} 

var obj = document.getElementById(spanName); 
obj.style.display="block"; 
} 

</script> 

任何帮助,这是非常赞赏谢谢。

+0

欢迎来到SO和学习如何在第一个问题中发布代码的荣誉。超级耶!但请注意您的问题标题格式,更适合的内容可能是“页面加载后,如何在元素上设置display:block?”这很重要 - 很多用户会跳过格式不正确的问题,然后继续前进。无论如何,玩得开心,享受! – 2009-11-06 04:03:32

+0

感谢您的提示!这是我做过任何编程的第一年,并且stackoverflow帮了我很多次。我只发布了几个问题,但我一直在阅读其他人的答案。我从现在开始一定会正确地问我的问题。谢谢。 – dfogge 2009-11-06 07:22:05

回答

1

简单,凉风习习的方法是做到这一点:

<body onload="showSpan('link1');"> 

这里的问题是,附着于身体onload事件这样执行有点晚在页面加载(所有后曲子分为包括图像 - 都会被加载),因此对于拨号用户来说这将是谋杀。 jQuery的实现一个更好的方法:如果你不使用jQuery,然后有人在这里变得更聪明,比我更有可能知道正确的方式使用“适当”的JavaScript做

$(document).ready(function() { 
    showSpan('link1'); 
}); 

,我不记得jQuery使用的事件名称。

+0

哦,如果在页面加载之后用JS做它并不重要,为什么不使用纯粹的CSS解决方案呢?您可以为缩略图定义“display:hidden”,然后执行此操作:“img.thumbnail:first-child {display:block;}”该第一个子选择器使其仅适用于容器中的第一个元素,所以如果你有一堆连续的图像只影响第一个。非常有用,取决于你的标记设置。 – 2009-11-06 04:05:31

+0

非常感谢尼古拉斯。因为它的工作,我现在只是以轻松愉快的方式。我使用wordpress,所以我认为当我有时间时,jquery会很容易实现。截止日期是今天,所以拯救了我的生命。 再次感谢! – dfogge 2009-11-06 07:20:11