-2

在隐藏/显示 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>
4

1 回答 1

1

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

#leftColumn {
    display: block;
}

#leftColumn ul {
    display: block;
}

div ul {
    display: none;
}

div:target ul {
    display: block;
}

当然，您确实需要确保#leftColumnul 首先是可见的；并且，进一步，要求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 小提琴演示。

于 2012-06-13T18:45:21.140 回答