Question

嗨，我有这个JS代码：

<script type="text/javascript">
    function on_off(div)
    {
        var divbox = document.getElementByID(div);

        if(divbox.style.visibility == 'hidden')
            divbox.style.visibility = 'visible';
        else
            divbox.style.visibility = 'hidden';
    }
</script>

我尝试做的是使用链接，当点击链接的事件发生时，脚本会运行以切换div的可见性。这是链接代码：

 <li><a onclick="on_off('postArticle')" href='#'>Post Article</a></li>

以及我要切换可见性的div：

<div id="postArticle">
        <div class="content">
            <article class="contentbox1">
            <div id="articleHEADER">
                    <h2>Post an Article</h2>    
            </div>
            <p>Title</p>
            <input type="text" name="Title" size="40">
            <br>
            <p>Content</p>
            <textarea rows="4" cols="50">
            </textarea>


            </article>
        </div>
    </div>

和CSS：

#postArticle
{
    visibility: hidden;
}

由于某种原因，它不起作用。 div可见性已关闭，当我点击链接时，它不会变得可见。

有什么建议吗？

Answer 1

对于sintax问题，你的脚本存在问题;您测试了目标元素的style属性，但是通过style设置了css，因此您在第一次点击时将visibility设置为隐藏，因此存在 BUG ，而你必须做this

之类的事情

<强>的JavaScript

function on_off(div)
        {
            var divbox = document.getElementById(div);

            if(divbox.style.visibility == 'hidden')
                divbox.style.visibility = 'visible';
            else
                divbox.style.visibility = 'hidden';
        }

<强> CSS

#postArticle
{
    //visibility: hidden;
}

<强> HTML

<div class="adminmenu">
    <ul>
        <li><a onclick="on_off('postArticle')" href='#'>Post Article</a></li>
        <li><a href='#'>Edit Articles</a></li>
        <li><a href='#'>View Logs</a></li>
        <li><a href='#'>View Comments</a></li>
    </ul>
    </div>

    <div id="postArticle" style="visibility: hidden">
            <div class="content">
                <article class="contentbox1">
                <div id="articleHEADER">
                        <h2>Post an Article</h2>    
                </div>
                <p>Title</p>
                <input type="text" name="Title" size="40">
                <br>
                <p>Content</p>
                <textarea rows="4" cols="50">
                </textarea>


                </article>
            </div>
        </div>

Answer 2

function on_off(div)
{
    var divbox = document.getElementById(div); //Id, not ID

    if(divbox.style.visibility == 'hidden')
        divbox.style.visibility = 'visible';
    else
        divbox.style.visibility = 'hidden';


}

使用javascript来控制div可见性样式

2 个答案: