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未处于活动状态且显示为：none（即另一个部分处于活动且可见），图像和带有“关于占位符的文本”的div也都可见。当我在萤火虫中对此进行调查时，它显示了类似的内容：

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

为什么两个div在父元素之外迁移？如何让它们与父母一起消失？

Answer 1

<p>元素不允许其中的<div>等块级元素。当HTML解析器看到<div>标记时，它会假定</p>标记已被省略（它是可选的）并且p元素已完成。因此，您将div元素视为p元素的兄弟姐妹。

提示：在SO上发布问题之前验证HTML总是一个好主意。如果你这样做了，验证器会向你指出错误。

块元素在其块父项之外进行解析

1 个答案: