Javascript 我如何赋予div同等地位的权力
在我道歉之前，我的代码非常混乱。请允许我简单易读。 基本上，我想要的是，当点击4个div中的任何一个时，它会转换为全屏。然后，当您再次单击它时，它将关闭/转换回原始位置。 这对第4部分非常有效，但前3部分在结束时出现了过渡问题。对于第一个div，当它关闭时，根本没有转换。 我希望这是明确的，任何帮助都将被感激。 下面是我的简化代码Javascript 我如何赋予div同等地位的权力,javascript,html,css,formatting,Javascript,Html,Css,Formatting,在我道歉之前，我的代码非常混乱。请允许我简单易读。 基本上，我想要的是，当点击4个div中的任何一个时，它会转换为全屏。然后，当您再次单击它时，它将关闭/转换回原始位置。 这对第4部分非常有效，但前3部分在结束时出现了过渡问题。对于第一个div，当它关闭时，根本没有转换。 我希望这是明确的，任何帮助都将被感激。 下面是我的简化代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/199
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>layout</title>
<style>
html, body
{
height: 100%;
padding: 0;
margin: 0;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:black;
font-size:300%;
}
#div1
{
background-color:red;
position:absolute;
transition:0.3s;
top:0;
left:0;
width: 50%;
height: 50%;
}
#div2
{
background-color:blue;
position:absolute;
top:0;
right:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div3
{
background-color:green;
position:absolute;
bottom:0;
left:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div4
{
background-color:yellow;
position:absolute;
bottom:0;
right:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div1.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#div2.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
}
#div3.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
}
#div4.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
</div>
<div id="div3">
div 3
</div>
<div id="div4">
div 4
</div>
<script>
$('#div1').click(function (e) {
$('#div1').toggleClass('fullscreen');
});
$('#div2').click(function (e) {
$('#div2').toggleClass('fullscreen');
});
$('#div3').click(function (e) {
$('#div3').toggleClass('fullscreen');
});
$('#div4').click(function (e) {
$('#div4').toggleClass('fullscreen');
});
</script>
</body>
</html>
布局
html，正文
{
身高：100%；
填充：0；
保证金：0；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，无衬线；
颜色：黑色；
字体大小：300%；
}
#第一组
{
背景色：红色；
位置：绝对位置；
过渡：0.3s；
排名：0；
左：0；
宽度：50%；
身高：50%；
}
#第二组
{
背景颜色：蓝色；
位置：绝对位置；
排名：0；
右：0；
过渡：0.3s；
宽度：50%；
身高：50%；
}
#第三组
{
背景颜色：绿色；
位置：绝对位置；
底部：0；
左：0；
过渡：0.3s；
宽度：50%；
身高：50%；
}
#第四组
{
背景颜色：黄色；
位置：绝对位置；
底部：0；
右：0；
过渡：0.3s；
宽度：50%；
身高：50%；
}
#第1部分：全屏
{
z指数：9999；
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
}
#第2部分：全屏
{
z指数：9999；
宽度：100%；
身高：100%；
位置：固定；
排名：0；
右：0；
}
#第3部分：全屏
{
z指数：9999；
宽度：100%；
身高：100%；
位置：固定；
底部：0；
左：0；
}
#第4部分：全屏
{
z指数：9999；
宽度：100%；
身高：100%；
位置：固定；
底部：0；
右：0；
}
第一组
第2组
第3组
第4组
$（'#div1'）。单击（函数（e）{
$（'#div1'）。toggleClass（'全屏'）；
});
$（'#div2'）。单击（函数（e）{
$（'#div2'）。toggleClass（'全屏'）；
});
$（'#div3'）。单击（函数（e）{
$（'#div3'）。toggleClass（'全屏'）；
});
$（'#div4'）。单击（函数（e）{
$（'#div4'）。toggleClass（'全屏'）；
});
#中心容器是z-index:15，所以它总是在其他分区之上
即使我们将其更改为z-index:0
我们有一个问题：您的每个div都位于内联元素a
中，并且由于div是绝对定位的，因此它们不会影响父a
元素的大小。每个a
的大小为0px×0px，位于页面的开头
Float
参数对absolute
定位的元素不提供任何信息，因为absolute
将元素从元素流中取出。我们应该怎么做才能让它像你想要的那样工作
首先-使父a
元素有价值：将div{}
的属性更改为a{}
第二个问题，我有一个问题，为什么我们在div的内部内容和背景大小的大小上有确定：changebackground size:100%100%至<代码>背景尺寸：封面
要实现正确的浮动a
-元素与div
：
div { width: 100%; height: 100%;}
因为我们没有a
的position
属性，所以元素div
s将完成整个页面。允许将a
-position属性更改为relative
a {position: relative;}
现在，我们有了内跨度视图：
我的最后一个问题和最后一个代码更改是：在最终实现中，您想做什么？如果上面的元素与#中心容器悬停不相交，则该悬停将起作用。如果需要节的元素悬停效果，应将span
放在#center
容器内
试试看
#center {z-index: 0}
a {z-index: 1;}