addClass/removeClass 和切换

Question

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

Check Here

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

只需像下面这样重写您的代码，

$(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 2

解决方案

在点击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 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