2

我是新手，我想知道如何显示多个列表。例如，我有很多类别，如水肺潜水、滑索、徒步旅行和攀岩。在每个类别中，它都有相关的图片。

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>

但是我很困惑将其余类别的照片放在哪里。当特定类别（即滑索）处于活动状态或由用户选择时如何隐藏它们。任何想法如何做到这一点？非常感谢您的帮助。谢谢。

4

2 回答 2

1

你的问题解决了。

点击演示

我在演示中使用了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>

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

于 2013-09-19T07:29:27.867 回答
0

这是一个小提琴

<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');
      });
   });
});
于 2013-09-19T07:42:05.703 回答