将活动 class 添加到多个切换 class

Question

我有一个跨 6 个 div 的多重切换显示 class，效果很好。我想通过将 class active 添加到当前选择的 p.route-link 来扩展它，并且还允许取消选择所有 .route div。目前，一旦您单击 p.route-link，就无法取消切换 .route div（总有一个可见）。我当前使用的活动 class 切换不正确。这是我的 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');
});

工作fiddle：http://jsfiddle.net/alexgomy/26ced1rn/3/

谢谢

Answer 1

您需要从所有 p 标签中删除 class active 然后将 class 添加到当前点击的 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>

Answer 2

在点击功能下添加这行代码

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

});

Answer 3

您需要像下面这样更改 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
});

工作fiddle：- http://jsfiddle.net/nvymhmkh/

将活动 class 添加到多个切换 class

Adding active class to multiple toggle class

javascript

jquery

toggle