时间戳

首页 > 解决方案 > jQuery 类标签删除

javascript - jQuery 类标签删除

问题描述

它是一个选项卡，活动选项卡有一个红点，非活动选项卡有一个灰点，但是当我单击灰点时，它会变成红色所有点（删除所有非活动类）。为什么会这样？

<div id="tabs">
    <div class="dots">
      <div class="dot"></div>
      <p id="tab1" class="menu">Profile</p>
    </div>
    <div class="dots">
      <div class="dot"></div>
      <p id="tab2" class="menu">The Dic Approach</p>
    </div>
    <div class="dots">
      <div class="dot"></div>
      <p id="tab3" class="menu">The partners</p>
    </div>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>

Javascript

$(document).ready(function() {
    $("#tabs .dots .dot:not(:first)").addClass("inactive");
    $('.container').hide();
    $('.container:first').show();
    
    $("#tabs .dots .menu").click(function(){
      var t = $(this).attr("id");
      if($(".dot").hasClass("inactive")){
        $(".dot").addClass("inactive");
        $(".dot").removeClass("inactive");
        
        $(".container").hide();
        $("#" + t + "C").fadeIn("slow");
      }
    })
  });

标签： javascriptjquery

解决方案

如果你改变

$(".dot")

至

$(this).closest(".dots").find(".dot")

（或类似的）然后它将使用与当前单击的菜单匹配的点

更新片段：

    $("#tabs .dots .dot:not(:first)").addClass("inactive");
    $('.container').hide();
    $('.container:first').show();
    
    $("#tabs .dots .menu").click(function(){
      var t = $(this).attr("id");
      var dot = $(this).closest(".dots").find(".dot");
      if (dot.hasClass("inactive")){
        $(".dot").addClass("inactive");
        dot.removeClass("inactive");
        
        $(".container").hide();
        $("#" + t + "C").fadeIn("slow");
      }
    })
  
.dot { color: red; float:left; }
.dot.inactive { color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tabs">
    <div class="dots">
      <div class="dot">[.]</div>
      <p id="tab1" class="menu">Profile</p>
    </div>
    <div class="dots">
      <div class="dot">[.]</div>
      <p id="tab2" class="menu">The Dic Approach</p>
    </div>
    <div class="dots">
      <div class="dot">[.]</div>
      <p id="tab3" class="menu">The partners</p>
    </div>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>

推荐阅读