0

以下は、私が持っているドロップダウン リストの HTML コードです。オプションを選択すると、American下の American() Javascript 関数<head>は別の div を表示する必要があります。しかし、これは起こりません。

Javascript:

<script type="text/javascript">
    function American(){
        <!-- Getting the Canadian -> Hiding it -> Turning 'on' the American. -->
        var Canadian = document.getElementById('text-inputs-Canadian');
        Canadian.style.display = 'none';

        var American = document.getElementById('text-inputs-American');
        American.style.display = 'block';
    }
</script>

ドロップダウン リスト:

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Standard</span>
        <ul class="dropdown">
                <li><a href="#" onclick="American();">American</a></li>
            <li><a href="#">Canadian</a></li>
        </ul>
</div>

引き継ぐ div は、次の#text-inputs-Americanように最初は非表示に設定されています。

#text-inputs-American{
    top:10px;
    margin-right:-200px;
    float:right;
    position:relative;
    display:none; /*Hides the input parameters until toggled by JS script*/
}

私が間違っている可能性があることについてのアイデアはありますか?

編集: 要求されたコード、「表示」する必要がある div

                <div id="text-inputs-American">
                            <span id="text-labels">S<sub>s</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">S<sub>1</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">T<sub>0</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">T<sub>L</sub>(g)</span>
                            <input type="number" step="any" />
                </div>
4

2 に答える 2

2

どのIDが正確にdivを持っていますか? getElementById メソッドの使用方法を混乱させていると思います。

これを試して：

 var Canadian = document.getElementById('text-inputs-Canadian');
 Canadian.style.display = 'none';

 var American = document.getElementById('text-inputs-American');
 American.style.display = 'block';

getElementById メソッドで「テキスト入力オブジェクト」を取得するために「#」文字を入れないでください。

于 2013-05-16T17:37:17.107 に答える
1

JQuery に精通している場合は、スクリプトを使用する方がはるかに簡単です

1 行のコードを記述するだけで実行できます。

$('#IdofTheDiv').show();//div を表示する場合http://api.jquery.com/show/ $('#IdofTheDiv').hide();//div を非表示にする場合http: //api.jquery.com/hide/

さらに、JQuery を使用して div 非表示/表示のアニメーションを追加することもできます。

于 2013-05-16T17:37:41.740 に答える