0

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

这是到目前为止的样子：

标头中的 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>

因此，所有列出的项目的下拉列表，滚动框中列出的项目，在单击列出的项目之前都是隐藏的。此外，通过再次单击同一列出的项目，它将再次隐藏其下拉菜单。

Basically, I want all the listed items in the scroll box to act the same as the first listed item does. But, I cannot figure out how to change the Javascript's Id to a class to make this work.

I tried changing the Javascript's Id to a class on my own, by doing this:

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

Then I changed the id="LearnHTML" to class="LearnHTML", but it didn't worked. So, does anyone knows how to go about in making it work?

CSS for the listed items:

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

1 回答 1

0
  • 首先，我相信字母大小写确实很重要。Javascript 必须与 HTML 匹配。
  • ID 必须是唯一的。html 文档中只能有一个 ID。这就是为什么其他人没有工作。
  • 使用该类将不起作用，因为您无法指定要切换的类。它将切换所有这些，并且代码需要更复杂一些才能处理多个类。

因此，使用采用 DivID 的 unhide 方法，将 ID 从、、更改"LearnHTML"为，并确保切换链接与大小写匹配。"LearnHTML1""LearnHTML2"...

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

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

于 2013-03-14T21:44:35.780 回答