Question

嗨，我正在构建这个具有内置隐藏下拉列表的滚动框。好吧，实际上并不是一个下拉列表，而是表现得像一个。我的问题是我无法弄清楚如何将javascript的脚本从ID更改为CLASS。这样我就可以在滚动框内列出的所有项目上使用该javascript。现在我只是将javascript的脚本嵌入到html doc中，而不是链接。

到目前为止它是这样的：

标题中的Javascript

<script>
function unhide(divID) { 
    var item = document.getElementById(divID); 
    if (item) {  item.className=(item.className=='hidden')?'unhidden':'hidden'; }  
} 
< /script >

有问题的代码

<ol align="center" style="font-weight: bold">Item</ol><!--Box Title-->
<div id="f1" style="height: 80px; width: 150px; overflow: scroll; border: 9px groove #FFC400"><!--scroll box-->

<!--subject 1-->
<div>
    <a href="javascript:unhide('learnHTML');">Name1 </a>
</div>
<div id="LearnHTML" class="hidden">
    <ul>
        <li><a href=""> info/description </a></li>
        <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
    </ul>
</div>

<!--subject 2-->
<a href="javascript:unhide('learnHTML');">Name2 </a>
<div>
<div id="LearnHTML" class="hidden">
    <ul>
        <li><a href=""> info/description </a></li>
        <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
    </ul>
</div>

<!--subject 3-->
    <a href="javascript:unhide('learnHTML');">Name3 </a>
    <div>
        <div id="LearnHTML" class="hidden">
            <ul>
                <li><a href=""> info/description </a></li>
                <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
            </ul>
        </div>
    </div> <!--End Scroll Box-->
</div>

因此，所有列出的项目的下拉列表，滚动框内列出的项目都将被隐藏，直到单击列出的项目为止。此外，通过再次单击相同的列出项目，它将再次隐藏其下拉。

基本上，我希望滚动框中列出的所有项目与第一个列出的项目的行为相同。但是，我无法弄清楚如何将Javascript的Id更改为类以使其工作。

我尝试通过这样做将Javascript的Id更改为一个类：

< script >
function unhide(divClass) {  var item = document.getElementByClassName(divClass);  if (item) {  item.className=(item.className=='hidden')?'unhidden':'hidden';  }  } < /script >

然后我将id="LearnHTML"更改为class="LearnHTML"，但它没有奏效。那么，有没有人知道如何使其发挥作用？

所列项目的CSS：

.hidden { display: none;}
.unhidden { 
    display: block; 
    background-color:orange;
    font: white;
    align:left
}

Answer 1

首先，信件外壳确实很重要，我相信。 Javascript必须与HTML匹配。
ID必须是唯一的。您可以在html文档中只有一个ID。这就是其他人没有工作的原因。
使用该类将无效，因为您无法指定要切换哪一个。它将切换所有这些，并且代码处理多个类需要更复杂。

因此，使用取消DivID的取消隐藏方法，将ID从"LearnHTML"更改为"LearnHTML1"，"LearnHTML2"，...，并确保切换链接符合大小写

顺便说一下，对于您的信息，您不能有两个具有相同名称的方法。 Javascript不支持重载。

这是小提琴：http://jsfiddle.net/Arlen22/tZdfx/2/

将Javascript脚本ID更改为类

1 个答案: