javascript - 使用 JavaScript 显示隐藏的 div - 在 JSFiddle 中有效，但在实时网站上无效

Question

此代码在 JSFiddle 中运行良好，但我无法在实时站点上运行它。我已经使用 Web 开发人员检查了 JS 文件加载，一切似乎都很好。我在一篇关于加载 jquery 的文章中读到，但我不知道如何或是否需要这样做。希望有人能提供帮助 - 谢谢。

<script type="text/javascript" src="http://www.picassosparadise.com/templates/rt_cygnet/js/2step_2.js"></script>

<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.picassosparadise.com/templates/rt_cygnet/css/reg-form2.css"/>

<div style="margin:0px auto;">
<h2>Sign up for FREE and begin meeting new friends today</h2>
<!-- Make sure you update the URL -->
<form id="lbform" class="formlayout" action="http://app2.picassosparadise.com" method="post">
    <fieldset>

        <div id="mydiv1">
            <div id="mydiv-container1">
                <div id="mydiv-content1">
                    <div class="magic">
                        <input type="hidden" value="1" name="sexuality">
                    </div>

                    <div class="row cf">
                        <label>I'm a:</label>
                        <select class="gender" name="gender">
                            <option>Please select</option>
                            <option value="1">man looking for a woman</option>
                            <option value="2">woman looking for a man</option>
                        </select>
                    </div>

                    <div class="row cf">
                        <label>First name:</label>
                        <input type="text" class="text blur" name="firstname">
                    </div>

                    <div class="row cf">
                        <label>D.O.B.:</label>
                        <select class="day" name="dobday">
                            <option value="">Day</option>
                            <option value="1">01</option>
                            <option value="2">02</option>
                            <option value="3">03</option>
                            <option value="4">04</option>
                            <option value="5">05</option>
                        </select>

                        <select class="month" name="dobmonth">
                            <option value="">Month</option>
                            <option value="1">January</option>
                            <option value="2">February</option>
                        </select>

                        <select class="year" name="dobyear">
                            <option value="">Year</option>
                            <option value="1993">1995</option>
                            <option value="1993">1994</option>
                            <option value="1993">1993</option>
                            <option value="1992">1992</option>
                            <option value="1991">1991</option>
                        </select>
                    </div>

                    <a href="#" onclick="show('mydiv2')">CONTINUE</a>
                </div>
            </div>
        </div>


                    <div id="mydiv2" style="display:none">
            <div id="mydiv-container2">
                <div id="mydiv-content2">
                    <div class="row cf">
                        <label for="email">Email:</label>
                        <input type="text" class="text blur" name="email" id="email">
                    </div>

                    <div class="row cf">
                        <label for="password">Password:</label>
                        <input type="password" value="" name="password" id="password">
                    </div>
                    <div class="row cf">
                        <button type="submit">JOIN FREE</button>
                    </div>
                    <div class="row cf">
                        <p class="note">By clicking 'Join Free' you are agreeing to our <a title="Terms of use" href="/help/terms.cfm">Terms of Use</a>.</p>
                    </div>
                </div>
            </div>
        </div>

    </fieldset>
    </form>
</div>

Answer 1

在 document.ready 函数中添加您的函数，例如:

$(document).ready(function(){
function show(target) {
    document.getElementById(target).style.display = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}
});

同时加载 jquery 库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>