我是新手，我想知道如何显示多个列表。例如，我有许多类别，如水肺潜水，Zipline，徒步旅行和攀岩。在每个类别中，它都有相关的图片。
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）处于活动状态或由用户选择时，如何隐藏它们。任何想法如何做到这一点？非常感谢帮助。感谢。
答案 0 :(得分：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>
请告诉我您的问题是否得到解决 。
答案 1 :(得分：0)
这是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');
});
});
});