Question

美好的一天，我想知道是否有人可以看看这个帮助我理解为什么第二个标签按钮似乎不起作用。我正在尝试使用标签按钮创建包装div，左侧div和右侧div以显示内容。如果我把显示/隐藏div放在左边的按钮然后显示并隐藏它应该但是，当它在右边的div中按钮什么都不做。

＆＃13;

#chk:checked~#tab1,
#chk2:checked~#tab2 {
  display: none;
}

div.wrapper {
  width: 100%;
  background: black;
  height: 300px;
}

div.forred {
  width: 80%;
  float: right;
}

div.left {
  width: 20%;
  float left;
}

div#tab1 {
  background: red;
  width: 100%;
  text-align: center;
}

div#tab2 {
  background: red;
  width: 100%;
  text-align: center;
}

div.right {
  width: 80%;
  float: right;
}

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%;
}

＆＃13;

<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>
      OVER HERE
    </div>
  </div>
  <div class="right">
    <div id=tab2>
      OVER HERE
    </div>
  </div>
</div>

＆＃13;

Answer 1

你的第二个＆＃34;按钮＆＃34;不起作用，因为看看你的css的这一部分：

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

在这里，你适用于#chk的兄弟：检查了一个display：none;它适用于第一个＆＃34;按钮＆＃34;因为在你的HTML中，你可以看到#tab1是#chk的兄弟：已经检查过了，但正如你已经猜到的那样，＃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>

希望这有帮助！

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

1 个答案: