отображение нескольких списков HTML/CSS

Question

Я новичок, и я хочу знать, как отображать несколько списков. Например, у меня есть много категорий, таких как подводное плавание, Zipline, Trekking и Wall climbing. В каждой категории он связан с изображениями.

jsfiddle

CSS:

/* gallery display */ 
.photos { 
    display: block; 
} 
.photos ul { 
    list-style: none; 
} 
.photos ul li { 
    width: 210px; 
    height: 310px; 
    background: #FFF; 
    display: inline; 
    list-style: none; 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    padding: 5px 3px 10px 3px; 
    ; 
    text-align: left; 
    color: #000; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 
.photos ul li p { 
    color: #838181; 
    font-size: 12px; 
    padding: 0 5px 0 5px; 
} 
.photos ul li span { 
    font-weight:bold; 
    padding: 10px 5px 0 5px; 
} 
.sub-nav { 
    font-size: 12px; 
    background: #fff; 
    margin: 0 0 15px 0; 
    padding: 15px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 
.sub-nav ul { 
    list-style:none; 
    margin: 0 5px 0 5px; 
    padding: 0; 
} 
.sub-nav li { 
    display:inline; 
} 

HTML:

<ul class="sub-nav"> 
    <li><a href="#zipline">Zipline |</a></li> 
    <li><a href="#">Wall-Climbing |</a></li> 
    <li><a href="#">Trekking |</a></li> 
    <li><a href="#">Scuba Diving </a></li> 
</ul> 
<div class="photos" id="photos"> 
    <ul> 
     <li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a></li> 
     <li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a></li> 
     <li><a href="#"><img src="http://sportslawnews.files.wordpress.com/2011/02/zip-line-photo-2.jpg" width="200" height="150" /></a></li> 
     <li><a href="#"><img src="http://www.treetopasia.com/sites/default/files/bangkok-zip-line-tours.jpg?1323449807" width="200" height="150" /></a></li> 
    </ul> 
</div> 

Но я запутался, куда поместить фотографии для остальных категорий. Как скрыть их, когда определенная категория (то есть zipline) активна или выбрана пользователем. Любые идеи, как это сделать? Помощь очень ценится. Благодарю.

Answer 1

Ваша проблема решена.

Нажмите на demo

Я использовал JavaScript в демо-версии. Теперь просто нажмите на каждый из Zipline | Стеновое скалолазание | Треккинг | Подводное плавание посмотреть только изображения подкатегории.

Код выглядит следующим образом-

<script> 
    function show_category(category_id) { 
     try { 
      var category_array = document.getElementsByName('category'); 
      for (var i = 0; i < category_array.length; i++) {    document.getElementById(category_array[i].id).style.display = 'none'; 
      } 
      document.getElementById(category_id+'_pics').style.display='block'; 
     } catch (err) { 
      alert(err); 
     } 
    } 
</script> 
<ul class="sub-nav"> 
    <li><a id='zipline' href="#" onclick="try{show_category(this.id);}catch(err){alert(err.message)}">Zipline |</a> 

    </li> 
    <li><a id='wall-climbing' href="#" onclick="show_category(this.id);">Wall-Climbing |</a> 

    </li> 
    <li><a id='trekking' href="#" onclick="show_category(this.id);">Trekking |</a> 

    </li> 
    <li><a id='scuba diving' href="#" onclick="show_category(this.id);">Scuba Diving </a> 

    </li> 
</ul> 
<div class="photos" id="photos"> 
    <ul name='category' id='zipline_pics' title='zipline'> 
     <li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a> 

     </li> 
     <li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a> 

     </li> 
     <li><a href="#"><img src="http://sportslawnews.files.wordpress.com/2011/02/zip-line-photo-2.jpg" width="200" height="150" /></a> 

     </li> 
     <li><a href="#"><img src="http://www.treetopasia.com/sites/default/files/bangkok-zip-line-tours.jpg?1323449807" width="200" height="150" /></a> 

     </li> 
    </ul> 
    <ul name='category' id='wall-climbing_pics' title='wall-climbing' style="display:none"> 
     <li><a href=" # "><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR5HDVSdDUgHJcvsEkthGl0QXrsbPG_W04cPFWgcXcci2_EpBpLoT-Aof8" width="200 " height="150 " /></a> 

     </li> 
     <li><a href="# "><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS3ef8f-_grlPKKHTgLnn3Nj4XtaBDJMhSF7czn8PWxiOqYUViRflCSXrrN" width="200 " height="150 " /></a> 

     </li> 
    </ul> 
    <ul name='category' id='trekking_pics' title='trekking' style="display:none"> 
     <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQJO-hVyCww9TkzF7CISfHFZPmCx1DndMFfflXb0lX8uYJdqAa3WBeJswk" width="200 " height="150 " /></a> 

     </li> 
     <li><a href="# "><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9x77hpyCWEqxN47rT7MXAqxfZ2Z8ICgrnADDS9GvZlUMraYHyUko5lsQ" width="200 " height="150 " /></a> 

     </li> 
    </ul> 
    <ul name='category' id='scuba diving_pics' title='scuba diving' style="display:none"> 
     <li><a href="# "><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTZ_avCIHWkEC6paYiB-vSQ3zNNDsHTpid9l0hC4EY39mBq38Jf_9Ok9M8" width="200 " height="150 " /></a> 

     </li> 
     <li><a href="# "><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwhCiNww521O9OkFD7b0egr4S9qGllhoApA3mtjFeuPi-ebShB4sVX8drf" width="200 " height="150 " /></a> 

     </li> 
    </ul> 
</div> 

Скажите, пожалуйста, если ваша проблема удалось решить или нет.

Answer 2

Вот Fiddle

<ul class="sub-nav"> 
    <li><a href="#" data-cat="zipline">Zipline</a></li> 
    <li><a href="#" data-cat="wallClimbing">Wall-Climbing</a></li> 
    <li><a href="#" data-cat="trekking">Trekking</a></li> 
    <li><a href="#" data-cat="scubaDiving">Scuba Diving</a></li> 
</ul> 

<div id="photos" class="photos"> 

<div class="zipline active"> 
    <a href="#"> 
    <img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.canada-english.com/de/image/activities/Zip-Line.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://fernieslopesidelodge.com/wp-content/uploads/2013/05/zipline-300x217_lg.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
</div> 

<div class="wallClimbing"> 
    <a href="#"> 
    <img src="http://www.maximise.co.uk/images/prods/80979-6282-traverse-climbing-wall.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.funpennsylvania.com/the_climbing_wall_indoor_rock_climbing_pa_pittsburgh_pennsylvania.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.papastravel.com/wp-content/uploads/2013/05/rci_gr_rockwall_family.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
</div> 

<div class="trekking"> 
    <a href="#"> 
    <img src="http://www.trekkingvietnam.net/news_photo/vietnam_remote_trekking2.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.infohub.com/images/tours/1_32168_0.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.balitobali.com/Images/mount-batur-trekking.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
</div> 

<div class="scubaDiving"> 
    <a href="#"> 
    <img src="http://www.mexicopuertoescondido.com/images/scuba.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://packages.asiatravel.com/packageImage/Tour/2373_scuba-diving-00.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
    <a href="#"> 
    <img src="http://www.divingtarifa.com/images/padi_discover_scuba_diving.jpg" width="200" height="150" /> 
    <span>Text</span> 
    </a> 
</div> 

</div> 


.sub-nav { 
    font-size: 12px; 
    background: #555; 
    margin: 0 0 15px 0; 
    padding: 15px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 
.sub-nav ul { 
    list-style:none; 
    margin: 0 5px 0 5px; 
    padding: 0; 
} 
.sub-nav li { 
    display:inline; 
    padding: 0 10px 0 10px; 
    border-right: 1px solid #fff; 
} 
.sub-nav li:last-child { 
    border-right: none; 
} 
.sub-nav li a { 
    text-decoration: none; 
    font-family: Verdana; 
    font-size: 12px; 
    letter-spacing: 1px; 
    color: #fff; 
} 

/* gallery display */ 
.photos div { 
    background: #fff; 
    display: none; 
    padding: 3px; 
    text-align: center; 
    color: #000; 
    opacity: 0; 
} 
.photos .active { 
    display: inline; 
    opacity: 0; 
} 
.photos a { 
    display: block; 
    float: left; 
    width: 200px; 
    height: 180px; 
    margin: 0 10px 10px 0; 
    font-family: Verdana; 
    font-size: 12px; 
    letter-spacing: 1px; 
    text-decoration: none; 
    color: #333; 
    border: 1px solid #333; 
} 
.photos img { 
    width: 200px; 
    height: 150px; 
} 
.photos p { 
    color: #838181; 
    font-size: 12px; 
    padding: 0 5px 0 5px; 
} 
.photos span { 
    display: block; 
    font-weight: bold; 
    text-align: center; 
    padding: 5px 0 0 0; 
} 


$(function() { 
    $('.sub-nav li a').each(function() { 
     $(this).click(function() { 
     var category = $(this).data('cat'); 
     $('.'+category).addClass('active').siblings('div').removeClass('active'); 
     }); 
    }); 
});