Question

我的代码出了什么问题？当我单击“显示/隐藏”按钮时没有任何反应。

<html>
    <head>
    <title>Test</title>

    <script type="text/javascript">
        function hidecontent(){
            document.getElementById("content").style.display = "none;";
        }
    </script>

    <style type="text/css">
        #content{
            border: 1px solid #003333;
            background-color: #000033;
            color: #ffffff;
            height: 500px;
            width: 500px;
            text-align: center;
            display: block;
        }
    </style>

    </head>

    <body>
        <form>
            <input type="button" value="Hide/Show" onclick="hidecontent()" />
        </form>

        <?php
            echo '<div id="content">Hello world!</div>';
        ?>
    </body>
</html>

Answer 1

document.getElementById（“content”）。style.display =“none;”;

请在没有分号后删除分号。

Answer 2

问题在这里：

document.getElementById("content").style.display = "none;";
                                                        ^
                    ------------------------------------|

应该是：

document.getElementById("content").style.display = "none";

如果你真的想要显示/隐藏div（如按钮value所示），你的功能应如下所示：

    function hidecontent(){
        var ds = document.getElementById("content");

        if (ds.style.display === 'block'){
           ds.style.display = 'none';
        }
        else {
           ds.style.display = 'block';
        }
    }

Answer 3

none之后你有一个分号。

简单的javascript隐藏内容功能不起作用

3 个答案: