javascript - block 元素在它们的 block 父元素之外被解析

Question

我正在编写一个简单的小铭牌页面，并使用多个段落隐藏和显示 javascript 来获取一个文档中的所有部分。这是我的 html:

<header>
<h1><span>Scott Colby</span></h1>
<nav>
    <div id="twitternav"><a href="javascript:showTwitter()">Twitter</a></div>
    <div id="tumblrnav"><a href="javascript:showTumblr()">Tumblr</a></div>
    <div id="flickrnav"><a href="javascript:showFlickr()">Flickr</a></div>
    <div id="facebooknav"><a href="javascript:showFacebook()">Facebook</a></div>
    <div id="linksnav"><a href="javascript:showLinks()">Links</a></div>
    <div id="aboutnav" class="active"><a href="javascript:showAbout()">About Me</a></div>
</nav>
</header>

<div id="content">
<p id="twitter">
    Placeholder text for Twitter
</p>

<p id="tumblr">
    Placeholder text for Tumblr
</p>

<p id="flickr">
    Placeholder text for Tumblr
</p>

<p id="facebook">
    Placeholder text for Tumblr
</p>

<p id="links">
    Placeholder text for Links
</p>

<p id="about" class="active">
    <div id="portrait"><img src="img/portrait.jpg" width="188" height="221" alt="-----" /><br /><span class="credit">Image: &copy; 2011 Jim Thomas</span></div>
    <div>Placeholder text for About Me</div>
</p>
</div>

我的 CSS:

nav {
    color: white;
    margin: 0 5px -8px 0;
    text-align: right;
    z-index: 1;
}

nav div{
    display: inline;
    margin: 0 0 0 .9em;
    padding: .25em .25em .25em .25em;
    z-index: 1;
}

nav div:hover {
    background: #F77D00;
}

nav div.active {
    background: #FF9900;
}

#content p {
    display: none;
    font-size: 85%;
    z-index: -1;
}

#content p.active {
    display: block;
}

还有我的javascript:

    function hideAll() {
    document.getElementById('twitter').className = '';
    document.getElementById('twitternav').className = '';

    document.getElementById('tumblr').className = '';
    document.getElementById('tumblrnav').className = '';

    document.getElementById('flickr').className = '';
    document.getElementById('flickrnav').className = '';

    document.getElementById('facebook').className = '';
    document.getElementById('facebooknav').className = '';

    document.getElementById('links').className = '';
    document.getElementById('linksnav').className = '';

    document.getElementById('about').className = '';
    document.getElementById('aboutnav').className = '';
}

function showTwitter() {
    hideAll();
    document.getElementById('twitter').className = 'active';
    document.getElementById('twitternav').className = 'active';
}
function showTumblr() {
    hideAll();
    document.getElementById('tumblr').className = 'active';
    document.getElementById('tumblrnav').className = 'active';
}

function showFlickr() {
    hideAll();
    document.getElementById('flickr').className = 'active';
    document.getElementById('flickrnav').className = 'active';
}


function showFacebook() {
    hideAll();
    document.getElementById('facebook').className = 'active';
    document.getElementById('facebooknav').className = 'active';
}

function showLinks() {
    hideAll();
    document.getElementById('links').className = 'active';
    document.getElementById('linksnav').className = 'active';
}

function showAbout() {
    hideAll();
    document.getElementById('about').className = 'active';
    document.getElementById('aboutnav').className = 'active';
}

现在，我知道要完成很多代码，但我认为这是非常简单的事情。

这是我的问题:即使 #about p 未处于事件状态并且显示:无(即另一个部分处于事件状态且可见)，图像和带有“关于的占位符文本”的 div 都可见。当我在 Firebug 中对此进行调查时，它显示如下内容:

<p id="about">  </p>
<div id="portrait"><img .... /></div>
<div>Placeholder text for About</div>

为什么这两个 div 会迁移到它们的父元素之外？我怎样才能让他们和他们的 parent 一起消失？

Answer 1

<p>元素不允许像 <div> 这样的 block 级元素在里面。当 HTML 解析器看到 <div>标签，它假定 </p>标记已被省略(它是可选的)并且 p 元素是完整的。因此，您看到的带有 div 元素的 DOM 是 p 元素的以下兄弟元素。

提示:在 SO 上发布问题之前验证您的 HTML 始终是个好主意。如果您这样做了，验证器就会向您指出错误。