使用javascript控制div可见性样式

嗨，我有这个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可见性已关闭，当我单击链接时，它将不可见

---

有什么建议吗？

在sintax成瘾问题中，您的脚本有问题；测试目标元素的

style

属性，但是通过

css

设置

style

，因此在第一次单击时将

visibility

设置为hidden，因此存在BUG，而您必须执行以下操作

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

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>

发表文章
头衔



内容

显示

和

可见性

是两个不同的CSS属性<代码>显示没有

可见

值，而

可见

有。不要把它们弄混了。很抱歉，我试图编辑JS代码，在这里发布时就这样留下了。当我将其替换为时，我仍然无法工作visibility@user3703944张贴JSFiddle@Infer-对不起，我是一个很糟糕的javascript用户。谢谢你解决了我的问题@nicael mmmh有一个bug，只有在第一次单击后才能工作；）@推断一个愚蠢的问题：为什么“有一个bug”？因为隐藏的可见性是由css设置的，所以您的解决方案只能在第二个阶段工作click@nicael已经测试过了，它有bug，但是你已经解决了这个问题：）谢谢@inferon消除了bug

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

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

#postArticle
{
    //visibility: hidden;
}

<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>