Question

我需要制作一种虚假导航，在点击列表元素时显示不同的部分...但不允许使用JavaScript。

我已经采取了这种方法

    <style type="text/css">
   body {
      display: block;
   }

   #closquer {
      display: inline-block;
   }

   :nth-child(1):focus ~ #lotext {
      display: block;
   }

   #lotext {
      display: none
   }
</style>
</head>

<body>
   <ul id="closquer">
      <li class="span3" tabindex="0">Section 1</li>
   </ul>
  <div id="lotext">Text Section 1</div>

这不起作用，因为元素不相邻 see demo

顺便说一句，如果元素是相邻的......就可以了。

<style type="text/css">
   body {
      display: block;
   }

   #closquer {
      display: inline-block;
   }

   :nth-child(1):focus ~ #lotext {
      display: block;
   }

   #lotext {
      display: none
   }
</style>
</head>

<body>
   <ul id="closquer">
      <li class="span3" tabindex="0">Section 1</li>
      <p id="lotext">Text Section 1</p>
   </ul>

See other demo

有没有办法用css3显示/隐藏非相邻元素？

Answer 1

您可以使用功能强大的target，如下所示：

section:not(:target) > a {
  background-color: #ccc;
}
section:target > a {
  background-color: white;
  border-bottom-color: #fff;
}
section:not(:target) > div { z-index: -2; }
section:target > div { z-index: -1; }

这是我为你做的一个例子：

<强> Live DEMO

Answer 2

标签和输入也可以使用，它可以允许打开几个盒子：

＆＃13;

#a:checked ~#boxA,
#b:checked ~#boxB,
#c:checked ~#boxC,
#d:checked ~#boxD,
#e:checked ~#boxE,
#f:checked ~#boxF,
#ab:checked ~#boxeA,
#bb:checked ~#boxeB,
#cb:checked ~#boxeC,
#db:checked ~#boxeD,
#eb:checked ~#boxeE,
#fb:checked ~#boxeF
{display:block;}
div, input {
  float:left;
  border:solid;
  display:none;
  }
nav ~ nav ~div {float:none;}
label {margin:1em;}
hr {clear:both;}
#a:checked ~ nav  [for="a"],
#b:checked ~ nav  [for="b"],
#c:checked ~ nav  [for="c"],
#d:checked ~ nav  [for="d"],
#e:checked ~ nav  [for="e"],
#f:checked ~ nav  [for="f"],
#ab:checked ~nav  [for="ab"],
#bb:checked ~nav  [for="bb"],
#cb:checked ~nav  [for="cb"],
#db:checked ~nav  [for="db"],
#eb:checked ~nav  [for="eb"],
#fb:checked ~nav  [for="fb"]
{color:red}

＆＃13;

<!-- checkbox allow multiple selection -->
<input id="a" type="checkbox" /><input id="b" type="checkbox" /><input id="c" type="checkbox" /><input id="d" type="checkbox" /><input id="e" type="checkbox" /><input id="f" type="checkbox" />
  <nav><label for="a">box A</label><label for="b">box B</label><label for="c">box C</label><label for="d">box D</label><label for="e">box E</label><label for="f">box F</label></nav>
  <div id="boxA"> Box A to show or hide</div>
  <div id="boxB"> Box B to show or hide</div>
  <div id="boxC"> Box C to show or hide</div>
  <div id="boxD"> Box D to show or hide</div>
  <div id="boxE"> Box E to show or hide</div>
  <div id="boxF"> Box F to show or hide</div>
<hr/>
  <!-- radio and name attributes allow 1 or more selection-->
  <input id="ab" type="radio" name="box" /><input id="bb" type="radio" name="box" /><input id="cb" type="radio" name="box" /><input id="db" type="radio" name="box" /><input id="eb" type="radio" name="box" /><input id="fb" type="radio" name="boxextra" />
  <nav><label for="ab">boxe A</label><label for="bb">boxe B</label><label for="cb">boxe C</label><label for="db">boxe D</label><label for="eb">boxe E</label><label for="fb">boxe F as extra</label></nav>
  <div id="boxeA"> Boxe A to show or hide</div>
  <div id="boxeB"> Boxe B to show or hide</div>
  <div id="boxeC"> Boxe C to show or hide</div>
  <div id="boxeD"> Boxe D to show or hide</div>
  <div id="boxeE"> Boxe E to show or hide</div>
  <div id="boxeF"> Boxe F to show or hide</div>

＆＃13;

与:target方法不同，它不会成为焦点。

有没有办法用css3显示隐藏元素（非邻接）

2 个答案: