jQuery：需要帮助隐藏之前浏览过的元素。

Question

请大家多多包涵，我只是在学习代码......

我已经建立了一个简单的相册页面，使用 "隐藏 "和 "显示 "来浏览不同的相册。但是，我遇到了一个问题，就是无法 "清除 "之前相册中的照片。

下面是一个简短的视频，展示了我的问题。http:/screencast.comtRrA0bygQm。

在我的index.html和main.js页面中，我有以下代码用于隐藏和显示相关相册。

$(".albums-nav a").on("click", function(e) {
    var target = $(this);
    var targetName = target.attr("href");

    $(targetName).addClass("active");
    $(targetName).show();


    $('.album-containers').hide();
    $('.albums-nav').show();

});

<!-- adding the side menu nav -->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-3 sidemenu">
            <div class="list-group albums-nav" id="albums-nav">
                <a href="#album1-photos" class="list-group-item">Album 1</a>
                <a href="#album2-photos" class="list-group-item">Album 2</a>
                <a href="#album3-photos" class="list-group-item">Album 3</a>
                <a href="#album4-photos" class="list-group-item">Album 4</a>
                <a href="#album5-photos" class="list-group-item">Album 5</a>
                <a href="#album6-photos" class="list-group-item">Album 6</a>
            </div>
        </div>  

        <div class="col-xs-12 col-lg-9 albums">
            <section id="album1-photos" class="album1-photos">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 1</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 2</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 3</h3>
                    </div>          
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 4</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 5</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 6</h3>
                    </div>  
                </div>
            </section>

我的想法是给目标添加一个新的类（"active"），并隐藏所有其他元素，但我很难想出如何做到这一点。

有什么建议吗？

Answer 1

试试吧

css

/* set `.albums [id^=album]` to `display:none` */
.albums [id^=album] {
  display:none;
}

js

$(".albums-nav a").on("click", function(e) {
  // hide all `.album`
  $(".albums [id^=album]").hide();
  // show `target` `.album`
  $($(this).attr("href")).show();
});

$(".albums-nav a").on("click", function(e) {
  $(".albums [id^=album]").hide();
  $($(this).attr("href")).show();

});

.albums [id^=album] {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-3 sidemenu">
            <div class="list-group albums-nav" id="albums-nav">
                <a href="#album1-photos" class="list-group-item">Album 1</a>
                <a href="#album2-photos" class="list-group-item">Album 2</a>
                <a href="#album3-photos" class="list-group-item">Album 3</a>
                <a href="#album4-photos" class="list-group-item">Album 4</a>
                <a href="#album5-photos" class="list-group-item">Album 5</a>
                <a href="#album6-photos" class="list-group-item">Album 6</a>
            </div>
        </div>  

        <div class="col-xs-12 col-lg-9 albums">
            <section id="album1-photos" class="album1-photos">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 1</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 2</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 3</h3>
                    </div>          
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 4</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 5</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 6</h3>
                    </div>  
                </div>
            </section>
          </div>
      </div>