Question

我在6个div中有一个多重切换显示类，效果很好。我想通过向当前选择的p.route-link添加class active来扩展它，并且还允许取消选择所有.route div。在那一刻，一旦你点击一个p.route-link就无法取消切换.route divs（总有一个可见）。我当前使用的活动类切换是不正确的。这是我的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/

由于

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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
});

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

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

3 个答案: