将活动类添加到多个切换类答案

【问题标题】：Adding active class to multiple toggle class将活动类添加到多个切换类
【发布时间】：2017-11-06 11:55:41
【问题描述】：

我有一个跨 6 个 div 的多个切换显示类，效果很好。我想通过将活动类添加到当前选定的 p.route-link 并允许取消选择所有 .route div 来扩展它。此刻，一旦您单击 p.route-link ，就无法取消切换 .route div（总是有一个可见的）。我当前使用的活动类切换不正确。这是我的 HTML

<p class="route-link" divId="route1">Route 1</p>
<p class="route-link" divId="route2">Route 2</p>
<p class="route-link" divId="route3">Route 3</p>
<p class="route-link" divId="route4">Route 4</p>
<p class="route-link" divId="route5">Route 5</p>
<p class="route-link" divId="route6">Route 6</p>

<div class="route" id="route1">route1</div>
<div class="route" id="route2">route2</div>
<div class="route" id="route3">route3</div>
<div class="route" id="route4">route4</div>
<div class="route" id="route5">route5</div>
<div class="route" id="route6">route6</div>

还有我的 jQuery

$(".route-link").bind("click", function() {
   $(".route").hide();
   var divId= $(this).attr("divId");
   $("#" + divId).show();
   $('p').toggleClass('active');
});

工作小提琴：http://jsfiddle.net/alexgomy/26ced1rn/3/

谢谢

【问题讨论】：

添加/删除类完美的工作谢谢。我还希望能够通过单击相同的 .route-link 来取消切换。例如我单击
Route 1
我希望能够再次单击以隐藏
这同样适用于任何路线。

标签： javascript jquery toggle

【解决方案1】：

您需要更改 jQuery 代码，如下所示：-

$(".route-link").on("click", function() {
    $(".route").hide();
    var divId= $(this).attr("divId");
    $("#" + divId).show();
    $(".route-link").removeClass('active'); //first remove active class from previous elements
    $(this).addClass('active'); //add active class to the current clicked-one
});

工作小提琴：- http://jsfiddle.net/nvymhmkh/

【讨论】：

@alexgomy 很高兴为您提供帮助:):)

【解决方案2】：

您需要从所有 p 标签中删除类 active 然后将该类添加到当前点击的 p 标签中

$('p').removeClass('active');
$(this).toggleClass('active');

$(".route-link").bind("click", function() {
    $(".route").hide();
    var divId= $(this).attr("divId");
    $("#" + divId).show();
    $('p').removeClass('active');
    $(this).toggleClass('active');
});

p{cursor:pointer;}
p:hover, p.active{color:#999;}
.route{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="route-link" divId="route1">Route 1</p>
<p class="route-link" divId="route2">Route 2</p>
<p class="route-link" divId="route3">Route 3</p>
<p class="route-link" divId="route4">Route 4</p>
<p class="route-link" divId="route5">Route 5</p>
<p class="route-link" divId="route6">Route 6</p>


<div class="route" id="route1">
  <img src="http://www.blossomguesthouseedinburgh.co.uk/images/airport_route_map.jpg" />
</div>
<div class="route" id="route2">
<img src="https://i.stack.imgur.com/ILbab.jpg" />
  </div>
<div class="route" id="route3">
  <img src="https://www.dmxzone.com/downloads/images/Image013_16.png" />
</div>
<div class="route" id="route4">
  <img src="http://www.ultra-fit.me/wp-content/uploads/2012/06/route-map-overview2.png" />
</div>
<div class="route" id="route5">
  <img src="https://i.stack.imgur.com/iHy7T.jpg" />
</div>
<div class="route" id="route6">
  <img src="https://www.routeconverter.com/images/routeconverter_route_on_map.png" />
</div>

【讨论】：

【解决方案3】：

在on click函数下添加这行代码

$(".route-link").bind("click", function() {
$(this).addClass('active');

});

【讨论】：