为什么javascript不能在所有引用的ID上工作_Javascript

为什么javascript不能在所有引用的ID上工作

javascript

为什么javascript不能在所有引用的ID上工作,javascript,Javascript,我在Joomla的网站上工作。现在，当有人将鼠标悬停在文本链接上时，我需要一个滑块来进行更改。我正在使用一些javascript。它使用id=slider处理第一个div，而不是本文中使用id=slider处理第二个div。有人能告诉我为什么会这样吗我在Joomla的自定义代码模块中使用以下代码 <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-88

我在Joomla的网站上工作。现在，当有人将鼠标悬停在文本链接上时，我需要一个滑块来进行更改。我正在使用一些javascript。它使用id=slider处理第一个div，而不是本文中使用id=slider处理第二个div。有人能告诉我为什么会这样吗

我在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>

{loadposition slider1}
{加载位置滑块2}



{loadposition java}

ID必须是唯一的标识符。对于多个元素，请使用类名。

Id在页面上应该是唯一的

您可以将滑块div包装在包装器div中，并将其作为迭代滑块的基础，类似这样

HTML:

dom元素不能具有相同的id！如果您为多个dom元素提供相同的id，javascript将只接受第一个元素。

您不能在多个元素上重复使用“id”值，并期望事情正常工作。它们在整个页面中应该是完全唯一的。ID必须是唯一的，具有相同ID的多个元素是无效的。还要注意，

getElementById

只返回一个元素（或null），而其他方法，如

getElementsByTagName

返回一个

NodeList

。名称（元素与元素）的差异应该已经是一个线索。

 <div id="sliders">
  <div class="boxVisible"></div>      
  <div class="boxHidden"></div>  
</div>

function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");

for (s in sliders) {
    if (sliders.hasOwnProperty(s)) {
        if (sliders[s].className == "boxVisible") {
            sliders[s].className = "boxHidden";
            alert('changed visible');
        } else if (sliders[s].className == "boxHidden") {
            sliders[s].className = "boxVisible";
            alert('changed hidden');
        }
    }
}
}

showHide2("sliders");