我正在Joomla网站上工作。现在我需要一个滑块来改变某人悬停在文字链接上的情况。我正在使用一些JavaScript。它使用id =滑块来处理第一个div,而不是在文章中使用id = slider的第二个div上。有人能告诉我为什么这样做吗?为什么JavaScript不能在所有引用的ID上工作
我在Joomla的自定义代码模块中使用以下代码。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p><a href="link.html" onmouseover="showHide('slider'); return false;">More</a></p>
</body>
</html>
这是我的文章:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
您不能在多个元素上重复使用“id”值,并期望事情能够正常工作。它们在整个页面中应该是完全独一无二的。 – Pointy 2012-02-01 15:15:49
ID必须是** unique **,具有相同ID的多个元素无效。另请注意,'getElementById'只返回* one *元素(或null),而其他方法(比如'getElementsByTagName')返回'NodeList'。名称(元素与元素)的区别应该已经成为线索。 – 2012-02-01 15:15:59