使用 html、css、Javascript 的 Div 问题答案

【问题标题】：Div problems using html, css, Javascript使用 html、css、Javascript 的 Div 问题
【发布时间】：2011-11-26 21:00:47
【问题描述】：

在 HTML 文档中，我创建了一个 div。在其中，我创建了另一个 div，并在这个内部 div 中放置了一个十字符号。我想构建一个事件函数，当用户单击十字符号时关闭父 div。

一个例子：

<!doctype html>
<html>
<head><title>Div problems</title></head>
<body>
<div id="content"> 
   <div id="box1"> <img src="people.gif"/> </div> 
   <div id="box2"> <img src="camera.gif" height=30px width=30px/> </div> 
   <div id="box3"> <img src="square.gif" height=30px width=30px/> </div> 
   <div id="box4"> <img src="rectangle-image3.gif" height=30px width=30px/> </div>    
   <div id="box5"> <img src="triangle.gif" height=30px width=30px/> </div> 
   <div id="box6"> <img src="correct.gif" height=30px width=30px/> </div> 
   <div id="box7"> <img src="exit.gif" height=30px width=30px/> </div>
</div> 
</body>
</html>

十字架将是“退出”图像。请告诉我该怎么做。

【问题讨论】：

你为什么不发布你的HTML代码，这样我们可以给你更好的建议。
我添加了示例代码。 @Ashish 请修改它以更好地描述您自己的情况。
这里我创建了一个 div，在最后一个 div 里面有 7 个 div 我希望当我点击它时应该删除父 div 内容
我已经发布了我的代码的人请看一下

标签： javascript html css

【解决方案1】：

像这样应该这样做，说这是你的标记：

<div id="parent"><div><span>CROSS SIGN</span></div></div>

还有 JQuery：

$('#parent span').click(function() {
             $('#parent').hide();
});

应该这样做。

【讨论】：

如果不使用类似的东西就无法做到这一点。 HTML 用于页面布局，CSS 用于样式化页面布局。 JS 或类似语言用于创建页面的动态方面。
可以，但不需要使用框架。$函数不是JS函数，它是由JQuery和类似框架添加的。与hide() 方法相同。这可以在不使用任何框架的情况下直接在 javascript 上完成，但是您的代码依赖于框架......这就是我所指出的。
您的代码隐藏了内部 div，而不是外部。另外，“#parent”这个名字是错误的：父级是外部 div，而不是内部。
首先谢谢，我没有使用 jquery，而是可以使用 javascript 你能帮我如何关闭父 div。谢谢 Ashish Juyal
这里我想从内部div关闭父div，请帮忙

【解决方案2】：

到目前为止，您尝试过什么吗？鉴于此描述，我想仅在内部元素上使用单击事件来更改外部元素的 CSS 就可以正常工作。这是jQuery 的一个简单示例：

$(document).ready(function() {
  $('#innerElement').click(function() {
    $('#outerElement').hide();
  });
});

这将有效地将父级的 CSS 显示设置为“无”。隐藏父元素当然会隐藏所有包含的元素，包括被点击的元素。

【讨论】：

【解决方案3】：

此代码以纯 javascript 形式显示了解决问题的简单方法。您应该能够使其适应您的特定问题。

<!doctype html>
<html>
    <head>
        <title>Div problems</title>
        <script type="text/javascript">
            window.onload = function() {
                var childLink = document.getElementById('sonlink');
                childLink.onclick = function() {
                    var parent = document.getElementById('parent');
                    parent.style.display = 'none';
                    return false;
                }
            }
        </script>    
    </head>
<body>
    <div id="parent">Outer div
        <div id="son">Inner div <a href="#" id="sonlink">+</a></div>
    </div>
</body>
</html>

【讨论】：

@Ashish 如果它对你有用，支持答案会很好:)
我不明白你点赞是什么意思？
@Ashish 听起来您确实需要阅读本网站的常见问题解答。对答案或问题进行投票意味着点击其左侧的 ^ 或 v 箭头表示“这很有用”或“这没有用”。
:) 没关系。您是否阅读了常见问题解答和基本指南？

【解决方案4】：

这个想法怎么样。 HTML：

<!doctype html>
<html>
<head><title>Div problems</title></head>
<body>
<div id="content" style="position:relative"> 
   <div id="box1"> <img src="people.gif"/> </div> 
   <div id="box2"> <img src="camera.gif" height=30px width=30px/> </div> 
   <div id="box3"> <img src="square.gif" height=30px width=30px/> </div> 
   <div id="box4"> <img src="rectangle-image3.gif" height=30px width=30px/> </div>    
   <div id="box5"> <img src="triangle.gif" height=30px width=30px/> </div> 
   <div id="box6"> <img src="correct.gif" height=30px width=30px/> </div> 
   <div id="box7" style="position:absolute;top:0;right:0" onclick="hideContent()"> <img src="exit.gif" height=30px width=30px/> </div>
</div> 
</body>
</html>

JS：

function hideContent() {
document.getElementById('content').style.display="none";
}

【讨论】：