-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 に答える