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 ，那么您的脚本编写工作会轻松很多

只需编写一行代码即可完成：

$('#IdofTheDiv').show();//用于显示div http://api.jquery.com/show/ $('#IdofTheDiv').hide();//用于隐藏div http: //api.jquery.com/hide/

此外，您甚至可以使用 JQuery 为 div 隐藏/显示添加动画。

于 2013-05-16T17:37:41.740 回答