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>

したがって、すべてのリストされたアイテムのドロップダウンリスト、スクロールボックス内のリストされたアイテムは、リストされたアイテムがクリックされるまで非表示になります。また、リストされている同じアイテムをもう一度クリックすると、ドロップダウンがもう一度非表示になります。

基本的に、スクロールボックスにリストされているすべてのアイテムが、最初にリストされているアイテムと同じように機能するようにします。しかし、これを機能させるために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
}
4

1 に答える 1

0
  • まず第一に、大文字と小文字は重要だと思います。Javascript は HTML と一致する必要があります。
  • ID は一意である必要があります。1 つの HTML ドキュメントで使用できる ID は 1 つだけです。それが他の人が働いていなかった理由です。
  • どのクラスを切り替えるかを指定できないため、クラスを使用しても機能しません。それらすべてを切り替えますが、複数のクラスを処理するには、コードをもう少し複雑にする必要があります。

そのため、DivID を受け取る unhide メソッドを使用して、ID を から 、 、 に変更し"LearnHTML"、"LearnHTML1"トグル"LearnHTML2"リンク...が大文字と小文字を区別していることを確認します。

ちなみに、同じ名前のメソッドを 2 つ持つことはできません。Javascript はオーバーロードをサポートしていません。

これがフィドルです：http://jsfiddle.net/Arlen22/tZdfx/2/

于 2013-03-14T21:44:35.780 に答える