Question

在隐藏/显示div方面需要一些帮助。我知道这里有一些帖子，但没有一个专门针对我要做的事情。

我的代码如下。我想要做的是从leftColum LI点击它时显示相应的DIV。

<div id="leftColumn">
      <ul>
        <li> <a href="#">Painting</a> </li>
        <li> <a href="#">Landscaping</a> </li>
        <li> <a href="#">Kitchen</a> </li>
        <li> <a href="#">What's next?</a> </li>
      </ul>
   </div>
  <div id="rightColumnPainting">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
        </ul>
      </div>
      <div id="rightColumnLandscaping">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/paint1.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint4.jpg" /> </li>
        </ul>
      </div>
      <div id="rightColumnKitchen">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/yard1.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard4.jpg" /> </li>
        </ul>
      </div>
  <div id="rightColumnNext">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house4.jpg" /> </li>
        </ul>
    </div>

Answer 1

为此，您需要隐藏div ul元素，然后使用:target选择器display: block：

#leftColumn {
    display: block;
}

#leftColumn ul {
    display: block;
}

div ul {
    display: none;
}

div:target ul {
    display: block;
}

当然，您需要确保首先看到#leftColumn ul;而且，要求您在页面中导航的a元素在其id属性中具有相应的href：

<ul>
    <li><a href="#rightColumnPainting">Painting</a></li>
    <li><a href="#rightColumnLandscaping">Landscaping</a></li>
    <li><a href="#rightColumnKitchen">Kitchen</a></li>
    <li><a href="#rightColumnNext">What's next?</a></li>
</ul>

JS Fiddle demo

Hide Div使用LI href显示另一个

1 个答案: