Question

我目前正在重新分配一个页面 - 这样就可以让JS处理从txt文件中上传内容的CSS格式div的布局和HTML包含div。我想要做的是隐藏其中没有任何内容的DIV - 目前如果没有内容，它仍会将div显示为细线。我已经尝试了几个建议，但无法使其正常工作。在CSS中尝试过“空单元格”选项，但由于某种原因这会破坏布局。

这是我的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>BROADCAST</title>
    <link rel="stylesheet" href="BCdata/WebStyles.css">
    <script src="jquery-ui/jquery-1.9.1.min.js"></script>
    <script src="BCdata/ContentHandler.js"></script>
</head>

<body class="main">


<!--------------------------------DONT CHANGE UNLESS NEEDED-------------------------------------------------------------->
<div id="buttons_div">

<!------------------Banner---------------------------------------------------------------------------------------->
<img src="images/broadcastbanner.gif" id="Image35">
<span id="CurrentDate"></span>
</div>

<div id="buttons_div" style="top:10px;">
   <!------------Archive Calendars----------------------------------------------------------------------------------->
<a href="./BroadcastArchiveCalendar.html"><img src="images/broadcast2013archive.gif" id="Image4"></a>
<a href="Broadcastarchivecalendar2014.html"><img src="images/broadcast2014archive.gif" id="Image5"></a>

<!--------------Signoff Sheet------------------------------------------------------------------------------------->
<a href="\\vmsint01\tc_contacts\Documents\BroadCast Signoff Sheet\Broadcast Mgt Sign-off.pdf" target="_blank"><img src="images/broadcastsignoff.gif" id="Image6"></a>

<!----------------------Up and Home-------------------------------------------------------------------------------> 
<a href="./main_tradecounter.htm"><img src="images/Up.GIF" id="Image2"></a>
<a href="./main_tradecounter.htm"><img src="images/Home.GIF" id="Image3"></a>
</div>

<!-------------------------------------------CONTENT DIVS------------------------------------------------------------------>
<div id="content_divs" style="top:20px; background-image: url(images/bluebox.png);">
    <p id="div1" style="color:white;"></p>
</div>


<div id="content_divs" style="top: 30px; background-image: url(images/whitebox.png);">
    <p id="div2"></p>
    <p id="div2"></p>
</div>


<div id="content_divs" style="top: 40px; background-image: url(images/redbox2.png);">
    <p id="div3" style="color:white;"></p>

</body>
</html>

这是我的CSS

#CurrentDate
{
position: absolute; 
top:15px;
left: 210px;
width:700px; 
text-align: center; 
z-index: 8;
color:white;
font-family:Arial;
font-size:35px;
text-transform: capitalize;
}

.main
{
background-color: #FFFFFF;
background-image: url(backbox.gif);
color: #000000;
text-align: center;
position: relative;
overflow: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
}

.main #content_divs
{
position: relative;
text-align: left;
z-index: 1; 
width: 960px;
margin: 0 auto;
border-style : solid; 
border-width: 3px; 
border-color: white;
overflow: hidden;
}

h1 
{
font-family: Arial;
    font-size: 20px;
font-weight: bold;
position: relative;
text-transform: capitalize;
font-weight: bold;
z-index: 5;
}

h2 
{
    font-family: Arial;
    font-size: 13px;
font-weight: bold;
position: relative;
z-index: 5;
}

p 
{
    font-family: Arial;
    font-size: 13px;
position: relative;
z-index: 5;
margin-left: 20px;
margin-right: 20px;
}

#buttons_div
{
position: relative;
}

#Image35
{
position:relative;
border: 0px #000000 solid;
width: 960px; 
height: 96px;
z-index: 2;
}

#Image2
{
border: 0px #000000 solid;
position: relative;
left:30px; 
width: 90px; 
height: 34px; 
z-index: 3;
}

#Image3
{
border: 0px #000000 solid;
position: relative;
left:30px; 
width: 86px; 
height: 34px; 
z-index: 4;
}

#Image4
{
border: 0px #000000 solid;
position: relative;
left:-30px; 
width: 236px; 
height: 34px; z-index: 5;
}

#Image5
{
border: 0px #000000 solid;
position: relative;
left:-30px; 
width: 236px; 
height: 34px; 
z-index: 6;
}

#Image6
{
border: 0px #000000 solid;
position: relative;
left:-30px; 
width: 236px; 
height: 34px; 
z-index: 7;
}

这是JS（内容处理程序）

$(function()
{
    $("#div1").load("BCdata/Content061114.txt .Div1 #p1");
});


$(function()
{
    $("#div2").load("BCdata/Content061114.txt .Div2 #p1");

});

$(function()
{
    $("#div3").load("BCdata/Content061114.txt .Div3 #p1");

});

$(function()
{
    $("#CurrentDate").load("BCdata/Content061114.txt #CurrentDate");

});

onload=function()
{
    var content_divs=document.getElementById('Div2');
    if(!div2.hasChildNodes()){content_divs.style.display='none'}
}

这是一个内容所在的TEXT文件

<span id="CurrentDate">thursday 6th november 2014, wk 40</span>

<!----Use <p> tag for indentation of a text, otherwise use <div> tag------>

<div class="Div1">

<div id="p1">
    <h1 style="color:white;">Congratulations to 66!</h1>

    <div>PDFs of 'Record Weeks' are now available on the Intranet.</div>

    <h2>Heading 1</h2>

    <p>Content is here</p>

    <h2>Heading 2</h2>

    <p>Content is here</p>


    <div><b><i>Click the link on the right to view PDFs</i></b></div>


</div>

</div>


<div class="Div2">

<div id="p1">

    <h1 style="color:black;">Poster</h1>

    <div>Poster Content</div>

</div>

</div>


<div class="Div3">

<div id="p1">

    <h1 style="color:white;">heading Content is here</h1>

    <div>Content is ehre blabla</div>
</div>
</div>

任何帮助都是非常令人遗憾的 - 抱歉，如果我似乎要求为我解决问题，但我是新手，非常热衷于学习。现在已经坚持了一段时间

Answer 1

您可以尝试：空伪类。

＆＃13;

div:empty {
  display: none;
}

＆＃13;

<div></div>
<div>div with content</div>

＆＃13;

参考：MDN

Answer 2

这样的事情会起作用。

elementList = document.querySelectorAll('div'); 
for(var i = 0; i < elementList.length; i++)
{
var element = elementList[i];
(element.children === 0) ? element.style.display = "none": element.style.display = "block";
}

这样做会得到所有Div元素，将它们放在一个数组中，然后检查每个元素，如果它没有子节点它将display设置为none，如果是，则将display设置为block。

修改

如果你不希望它与子女一起混乱，只需将if语句更改为：

(element.children === 0) ? element.style.display = "none": "";

我们使用 .children ，因为这只返回Element对象（又名HTML标记的东西），而不是绝对的＆＃39;每个孩子。

Answer 3

演示 - http://jsfiddle.net/y7mgmm2u/

感谢@emmanuel

＆＃13;

*:empty {
    display:none;
}

＆＃13;

<div>
    <p><span></span>

    </p>
</div>
<div>test</div>
<p></p>
<p>test</p>

＆＃13;

如果没有内容</div>，则使<div>不可见

3 个答案: