Скрыть Div показать другое, используя LI href

Question

нужно немного помочь в скрытии/показе divs. Я знаю, что здесь было несколько сообщений, но никто из них специально не нацелился на то, что я ищу.

Мой код ниже. То, что я хотел бы сделать, это иметь соответствующий дисплей DIV, когда он щелкнут слева от LI.

<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 уль видна первый; и, кроме того, требует, чтобы 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.