當點擊到某一個圖標的時候要切換背景圖, 之后點擊別的圖標要把之前的變回去, 當前點擊的切換背景圖

第一張圖是未點擊過的, 第二張圖是點擊查詢的圖標之后切換背景圖, 因為每張背景圖都一樣, 所以類似于$(this).addClass("active").siblings().removeClass("active"), 這樣的方法都做不了

之前是點擊上面的圖標然后進行切換背景圖, 也就是通過active的類來切換, 但是只能切換單張, 點擊第一個圖標在點擊第二個圖標之后, 要把第一個圖標的顏色變原來的樣子, 現(xiàn)在我做的是只能切換當張圖, 點擊別的切換不了

html

    <div class="function-btn">
      <ul class="clearfix">
        <!-- 查詢 -->
        <li class="function-btn-list index-list" @click="searchBtn">
          <div class="function-btn-list-icon flight">
          </div>
        </li>
        <!-- 新增 -->
        <li class="function-btn-list index-list" @click="plantBtn">
          <div class="function-btn-list-icon add">
          </div>
        </li>
        <!-- 測量 -->
        <li class="function-btn-list index-list" @click="measureBtn">
          <div class="function-btn-list-icon measure">
          </div>
        </li>
        <!-- 標繪 -->
        <li class="function-btn-list index-list" @click="plotingBtn">
          <div class="function-btn-list-icon refresh">
          </div>
        </li>
      </ul>
    </div>  

css

.function-btn-list-icon {
  margin: 10px;
  width: 46px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.function-btn-list-icon.reset:active {
  background-image: url("../../src/assets/index/reset_on.png");
}

.function-btn-list-icon.refresh {
  background-image: url("../../src/assets/index/plot.png");
}

.function-btn-list-icon.refresh:active {
  background-image: url("../../src/assets/index/plot_on.png");
}

.function-btn-list-icon.measure {
  background-image: url("../../src/assets/index/measurement.png");
}

.function-btn-list-icon.measure.active {
  background-image: url("../../src/assets/index/measurement_on.png");
}

.function-btn-list-icon.plotted {
  background-image: url("../../src/assets/index/layer.png");
}

.function-btn-list-icon.plotted.active {
  background-image: url("../../src/assets/index/layer_on.png");
}

.function-btn-list-icon.flight {
  background-image: url("../../src/assets/index/query.png");
}

.function-btn-list-icon.flight.active {
  background-image: url("../../src/assets/index/query_on.png");
}

.function-btn-list-icon.add {
  background-image: url("../../src/assets/index/add.png");
}

.function-btn-list-icon.add.active {
  background-image: url("../../src/assets/index/add_on.png");
}

.function-btn-list-icon.reserve {
  background-image: url("../../src/assets/index/reserve.png");
}

js

      // 查詢
      $(".function-btn-list-icon.flight").click(function () {
        $(this).toggleClass("active");
          if ($(".function-btn-list-icon.flight").hasClass("active")) {
            $("#search_show").show();
          } else {
            $("#search_show").hide();
          }
      })

這樣只能控制單個圖標