html - 显示多个列表 HTML/CSS

Question

我是新手，想知道如何显示多个列表。例如，我有很多类别，例如 Scuba diving、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 |爬墙 |徒步 | Scuba Diving 以仅查看其下方的图像。

代码如下-

<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>

请告诉我您的问题是否已解决。