Fatal编程技术网
  • javascript/
  • 使用html、css、Javascript的Div问题

使用html、css、Javascript的Div问题

javascript html css

使用html、css、Javascript的Div问题,javascript,html,css,Javascript,Html,Css,在HTML文档中，我创建了一个div。在其中，我创建了另一个div，在这个内部div中我放置了一个十字符号。我想构建一个事件函数，当用户单击十字符号时关闭父div 例如： <!doctype html> <html> <head><title>Div problems</title></head> <body> <div id="content"> <div id="box1">

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


Div问题
十字架将是“出口”图像。
请告诉我怎么做。

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

<div id="parent"><div><span>CROSS SIGN</span></div></div>
这应该行。

到目前为止你试过什么了吗？根据这个描述，我想只需在内部元素上使用一个click事件来更改外部元素的CSS就可以了。下面是一个简单的例子：

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

此代码以纯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>


Div问题
window.onload=函数（）{
var childLink=document.getElementById（'sonlink'）；
childLink.onclick=函数（）{
var parent=document.getElementById（'parent'）；
parent.style.display='none'；
返回false；
}
}
外分区
内分区
这个想法怎么样。 HTML:

为什么不发布你的HTML代码，这样我们可以给你更好的建议。我添加了示例代码@Ashish请修改它以更好地描述您自己的情况。在这里，我创建了一个div，在最后一个div中有七个div，我希望当我点击它时，父div的内容应该被删除。伙计们，我已经发布了我的代码，请查看它。如果不使用类似的东西，这是无法完成的。HTML用于页面布局，CSS用于页面布局样式。JS或simliar语言用于创建页面的动态方面。是的，但不需要使用框架。。
$
函数不是由JQuery和类似框架添加的JS函数。
hide（）
方法也是如此。这可以在不使用任何框架的情况下直接在javascript上完成，但您的代码依赖于框架。。。这就是我要指出的。您的代码隐藏了内部div，而不是外部div。另外，“#parent”这个名字是错误的：parent是外部div，而不是内部div。首先，谢谢，我没有使用jquery，我可以使用javascript，你能帮我关闭parent div吗？谢谢Ashish juyal这里我想从内部div关闭parent div，plzhelp@Ashish如果对你有用的话，向上投票答案会很好：）我不明白你说的向上投票是什么意思？@Ashish听起来你真的需要阅读这个网站的常见问题解答。投票回答或问题意味着点击左边的“^”或“v”箭头说“这有用”或“这没用”。：）那就别管了。您是否阅读了常见问题解答和基本指南？ 
$(document).ready(function() {
  $('#innerElement').click(function() {
    $('#outerElement').hide();
  });
});

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

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

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