Html 在另一个容器中显示/隐藏div_Html_Css_Nested

Html 在另一个容器中显示/隐藏div

html css

Html 在另一个容器中显示/隐藏div,html,css,nested,Html,Css,Nested,你好，我想知道是否有人可以看看这个帮助我理解为什么第二个标签按钮似乎不工作。我正在尝试制作包装器div、带有标签按钮的左侧div和显示内容的右侧div。如果我用按钮将show/hide div放在左边，那么它会像应该的那样显示和隐藏，但是当它位于右边的div中时，按钮什么也不做 #chk:checked#tab1， #chk2：选中~#表2{ 显示：无； } 分区包装器{ 宽度：100%；背景：黑色；高度：300px； } 福雷德分区{ 宽度：80%；浮动：对； } 左分区{ 宽度

你好，我想知道是否有人可以看看这个帮助我理解为什么第二个标签按钮似乎不工作。我正在尝试制作包装器div、带有标签按钮的左侧div和显示内容的右侧div。如果我用按钮将show/hide div放在左边，那么它会像应该的那样显示和隐藏，但是当它位于右边的div中时，按钮什么也不做

#chk:checked#tab1，
#chk2：选中~#表2{
显示：无；
}
分区包装器{
宽度：100%；
背景：黑色；
高度：300px；
}
福雷德分区{
宽度：80%；
浮动：对；
}
左分区{
宽度：20%；
向左浮动；
}
分区表1{
背景：红色；
宽度：100%；
文本对齐：居中；
}
分区表2{
背景：红色；
宽度：100%；
文本对齐：居中；
}
右分区{
宽度：80%；
浮动：对；
}
input.tabs{
显示：无；
}
label.tab_按钮{
浮动：左；
填充：15px 0px；
字号：600；
文本对齐：居中；
颜色：#FFFFFF；
边框底部：1px镶嵌黑色；
背景#30E514；
宽度：100%；
}


表1
表2
在这里
在这里

你的第二个“按钮”不起作用，因为看看你的css的这一部分：

#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:none; }

在这里，您将应用于#chk:checked的兄弟姐妹显示：无；它适用于第一个“按钮”，因为在HTML中，您可以看到#tab1是#chk:checked的兄弟，但正如您已经猜到的那样，#chk2:checked不是#tab2的兄弟。因此，在div#tab1之后向上移动div#tab2，然后它就会工作

另外，我花了一些时间修改代码，使它们首先不可见，然后在有人单击tab1或tab2时可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Untitled 1</title>

<style>

    div.wrapper {width: 100%; background: black; height: 300px;}
    div.left {width: 20%; float left;}
    input.tabs { display: none;}
    label.tab_button { 
        float: left; 
        padding: 15px 0px; 
        font-weight: 600;
        text-align: center; 
        color: #FFFFFF; 
        border-bottom: 1px inset black;
        background: #30E514; 
        width: 100%;
    }
    #tab1, #tab2 {background: red; width: 100%; text-align: center;}
    div.right { width: 80%; float: right;}

    #tab1, #tab2 {display:none;}

    #chk:checked ~ #tab1,
    #chk2:checked ~ #tab2 { display:block; }

</style>
</head>
<body>
<div class="wrapper">
    <div class="left">
        <input type="checkbox" id="chk" class="tabs">
        <label for="chk" class="tab_button">tab 1</label>
        <input type="checkbox" id="chk2" class="tabs">
        <label for="chk2" class="tab_button">tab 2</label>
        <div id="tab1">
            TAB 1 HERE
        </div>
        <div id="tab2">
            TAB 2 HERE
        </div>
    </div>
    <div class="right">
        Right div
    </div>
</div>
</body>
</html>


无标题1
div.wrapper{宽度：100%；背景：黑色；高度：300px；}
div.left{width:20%；float left；}
input.tabs{display:none；}
label.tab_按钮{
浮动：左；
填充：15px 0px；
字号：600；
文本对齐：居中；
颜色：#FFFFFF；
边框底部：1px镶嵌黑色；
背景#30E514；
宽度：100%；
}
#tab1，#tab2{背景：红色；宽度：100%；文本对齐：居中；}
div.right{width:80%；float:right；}
#tab1，#tab2{显示：无；}
#chk:选中~#表1，
#chk2:选中~#tab2{显示：块；}
表1
表2
这里是表1
这里是表2
右分区

希望这有帮助

你的第二个“按钮”不起作用，因为看看你的css的这一部分：

#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:none; }

另外，我花了一些时间修改代码，使它们首先不可见，然后在有人单击tab1或tab2时可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Untitled 1</title>

<style>

    div.wrapper {width: 100%; background: black; height: 300px;}
    div.left {width: 20%; float left;}
    input.tabs { display: none;}
    label.tab_button { 
        float: left; 
        padding: 15px 0px; 
        font-weight: 600;
        text-align: center; 
        color: #FFFFFF; 
        border-bottom: 1px inset black;
        background: #30E514; 
        width: 100%;
    }
    #tab1, #tab2 {background: red; width: 100%; text-align: center;}
    div.right { width: 80%; float: right;}

    #tab1, #tab2 {display:none;}

    #chk:checked ~ #tab1,
    #chk2:checked ~ #tab2 { display:block; }

</style>
</head>
<body>
<div class="wrapper">
    <div class="left">
        <input type="checkbox" id="chk" class="tabs">
        <label for="chk" class="tab_button">tab 1</label>
        <input type="checkbox" id="chk2" class="tabs">
        <label for="chk2" class="tab_button">tab 2</label>
        <div id="tab1">
            TAB 1 HERE
        </div>
        <div id="tab2">
            TAB 2 HERE
        </div>
    </div>
    <div class="right">
        Right div
    </div>
</div>
</body>
</html>


无标题1
div.wrapper{宽度：100%；背景：黑色；高度：300px；}
div.left{width:20%；float left；}
input.tabs{display:none；}
label.tab_按钮{
浮动：左；
填充：15px 0px；
字号：600；
文本对齐：居中；
颜色：#FFFFFF；
边框底部：1px镶嵌黑色；
背景#30E514；
宽度：100%；
}
#tab1，#tab2{背景：红色；宽度：100%；文本对齐：居中；}
div.right{width:80%；float:right；}
#tab1，#tab2{显示：无；}
#chk:选中~#表1，
#chk2:选中~#tab2{显示：块；}
表1
表2
这里是表1
这里是表2
右分区

希望这有帮助

谢谢你，这确实有帮助。我想让div显示在右边。因此，当按下左侧div容器中的按钮时，它会在右侧显示该div。有没有办法让按钮显示右边另一个div中的div内容？谢谢，这确实有帮助。我想让div显示在右边。因此，当按下左侧div容器中的按钮时，它会在右侧显示该div。有没有办法让按钮显示右侧另一个div中的div内容？