Question

我知道这个问题已被回答了几次，我也找到了答案。但是，代码似乎不适用于我想要制作的网站。这是一个静态页面，应该没有互联网。我想我缺少定义一些功能。请帮忙！

＆＃13;

<form>
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
<br>    
<div id="ar_1" style="display:none;">
<p>info for option1</p>
</div>
<div id="ar_2" style="display:none;">
<p>info for option2</p>
</div>
<div id="ar_3" style="display:none;">
<p>info for option3</p>
</div>
<div id="ar_4" style="display:none;">
<p>info for option4</p>
</div>
</form>
<script>
$(document).ready(function () {    
    $('#id_radio1').click(function () {
        $('#ar_1').show('fast');
        $('#ar_2').hide('fast');        
        $('#ar_3').hide('fast');
        $('#ar_4').hide('fast');
    });
    $('#id_radio2').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').show('fast');
        $('#ar_3').hide('fast');
        $('#ar_4').hide('fast');
    });
     $('#id_radio3').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').hide('fast');
        $('#ar_3').show('fast');
        $('#ar_4').hide('fast');
    })
     $('#id_radio4').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').hide('fast');
        $('#ar_3').hide('fast');
        $('#ar_4').show('fast');
    })
});
</script>

＆＃13;

Answer 1

从您的代码中，您似乎正在使用JQuery Library。但是，您的代码中的任何位置都没有导入。因为你的代码可以工作;您要么必须包含JQuery的本地副本（因为您没有Internet访问权限），要么只从托管服务器加载它（如果您有Internet访问权限）。 Quick-Test it Here

<强> JAVASCRIPT：

<!-- LOCAL JQUERY INCLUDED IN SCRIPT TAG FIRST -->
<script type="text/javascript" src="assets/js/jquery.js"></script>

<!-- OR PULLED FROM HOSTED CDN: DELETE THIS OPTION IF YOU HAVE NO INTERNET ACCESS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script type="text/javascript">
    (function($){
        $(document).ready(function(evt){
            $('#id_radio1').click(function () {
                $('#ar_1').show('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio2').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').show('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio3').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').show('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio4').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').show('fast');
            })

        });
    })(jQuery);

</script>

<强> HTML：

    <form>
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input>
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
        <input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
        <input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
        <br>
        <div id="ar_1" style="display:none;">
            <p>info for option1</p>
        </div>
        <div id="ar_2" style="display:none;">
            <p>info for option2</p>
        </div>
        <div id="ar_3" style="display:none;">
            <p>info for option3</p>
        </div>
        <div id="ar_4" style="display:none;">
            <p>info for option4</p>
        </div>
    </form>

使用单选按钮显示特定选项？

1 个答案: