Question

我在下面写了切换代码，我需要“活动”类应该在“地图/视图”切换时切换。当我点击另一个链接时，首先应删除并应用于点击的链接。

HTML：

<div class="member-view-switch">
  <a href="#" class="toggle-button active">Tile</a>
  <a href="#" class="toggle-button">Map</a>
</div>

<div class="toggle-item target-tile-view">
  Tile View
</div>

<div class="toggle-item target-map-view">
  Map View
</div>

CSS：

.member-view-switch {
  margin-bottom: 20px;
}

a,
:hover,
:focus {
  color;
  #333333;
  text-decoration: none;
  padding-right: 15px;
}

.active {
  color: blue;
  font-weight: bold;
}

.toggle-item {
  border: 1px solid #333;
  padding: 20px;
  margin-bottom: 20px;
}

jQuery的：

$(document).ready(function() {

  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
    if ($(this).hasClass("active")) {
      $(".target-tile-view").show();
      $(".target-map-view").hide();
    } else {
      $(".target-tile-view").hide();
      $(".target-map-view").show();
    }
  });

});

Answer 1

<强>解决方案

点击Title或Map时，您必须从导航中删除有效课程，并将广告移至当前元素。$(this)用于获取当前元素。

$(".toggle-button").removeClass("active")
$(this).addClass("active")

$(document).ready(function() {

  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
    $(".toggle-button").removeClass("active")    // Newly added
    $(this).addClass("active")     // Newly added
    if ($(this).hasClass("active")) {
      $(".target-tile-view").show();
      $(".target-map-view").hide();
    } else {
      $(".target-tile-view").hide();
      $(".target-map-view").show();
    }
  });

});

<强> Working Demo

Answer 2

只需重写您的代码，如下所示

$(document).ready(function() {
  var items = $(".toggle-item");
  items.filter(".target-map-view").hide();
  var buttons = $(".toggle-button").click(function() {
    buttons.removeClass("active").filter(this).addClass("active");
    items.hide().eq($(this).index()).show();
  });
});

此代码适用于任意数量的标签和内容。

DEMO

Answer 3

试试这个：当您最初隐藏地图视图按钮和div时，您可以轻松使用toggle()来显示/隐藏地图和平铺视图。并使用toggleClass("active")添加删除活动类。

为了避免用户连续点击相同的按钮时发生故障，我们可以检查点击过的按钮是否曾被点击过。

$(document).ready(function() {
  var $clickedButton =  $(".toggle-button.active");
  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
       //if previously clicked then return and do nothing
      if($clickedButton.is($(this)))
         return true;

      $clickedButton = $(this);
      $(".toggle-button").toggleClass("active");
      $(".target-tile-view").toggle();
      $(".target-map-view").toggle();

  });

});

<强> JSFiddle Demo

addClass / removeClass和toggle

3 个答案:

DEMO