使用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的可见性。下面是链接代码:

 <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的可见性是关闭的，当我点击链接时，它是不可见的。

有什么建议吗?

在成瘾sintax问题，有一个问题与您的脚本;你测试了目标元素的style属性，但是你通过css设置了style，所以你在第一次点击时将visibility设置为隐藏，所以有一个BUG，相反你必须做这样的事情

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

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

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'; }

相关内容

最新更新

热门标签：