通过jQuery在嵌套元素上切换CSS类

目标是在单击时切换活动类。主选项卡使用“.active”，而内部选项卡使用“.plansacative”：

工作原理：

• 类别窗格的工作方式（“活动”）应按以下方式编码：

  $('#plans a').on('click', 
    function()
    {
      $(this).closest('#plans').find('.active').removeClass('active');
      $(this).addClass('active');
    }
  );

• 内部卡舌也可以工作（加载时）

不包括：

• 当类别从默认类别（“active still works”）切换时，它会出现问题：

• 内部选项卡不再切换到其他选项卡（“plansActive”），而是显示各自的内容

• 这是内部选项卡的代码：

  $('.plansNumbers li a').on('click', 
    function() {
      $("a",$(this).parents("ul")).removeClass('plansActive');
      $(this).addClass('plansActive');
    }
  );

HTML代码段如下所示：

<div id="plans">
    <a class="active" onclick="document.getElementById('premiumplans').innerHTML=document.getElementById('lte').innerHTML">
    <img alt="" src="/Postpaid/images/default-source/default-album/lteplans.png?sfvrsn=0" title="lteplans" sfref="[images|OpenAccessDataProvider]8a0da950-71ea-6a27-ac25-ff0000b01406" /></a>
    <a onclick="document.getElementById('premiumplans').innerHTML=document.getElementById('phonep').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/phoneplans.png?sfvrsn=0" title="phoneplans" sfref="[images|OpenAccessDataProvider]022da950-71ea-6a27-ac25-ff0000b01406" /></a>
</div>

<div class="plansCurrent" id="premiumplans">
    <div class="plansNumbers">
      <ul>
        <li><a class="plansActive" onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('phone1175').innerHTML"> <img alt="" src="/Postpaid/images/default-source/default-album/nav-1175.png?sfvrsn=0" title="nav-1175" sfref="[images|OpenAccessDataProvider]9a0da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('phone1675').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-1675.png?sfvrsn=0" title="nav-1675" sfref="[images|OpenAccessDataProvider]a20da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('phone2175').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-2175.png?sfvrsn=0" title="nav-2175" sfref="[images|OpenAccessDataProvider]aa0da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('phone3175').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-3175.png?sfvrsn=0" title="nav-3175" sfref="[images|OpenAccessDataProvider]b20da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
      </ul>
    </div>

    <div class="plansContent" id="plansNumContent">
      <img alt="" src="/Postpaid/images/default-source/default-album/1175-1.png?sfvrsn=0" title="1175" />
    </div>

    <div id="phone1175" style="display: none;">
      <img alt="" src="/Postpaid/images/default-source/default-album/1175-1.png?sfvrsn=0" title="phone1175" />
    </div>

    <div id="phone1675" style="display: none;">
      <img alt="" src="/Postpaid/images/default-source/default-album/1675-1.png?sfvrsn=0" title="phone1675" />
    </div>

    <div id="phone2175" style="display: none;">
      <img alt="" src="/Postpaid/images/default-source/default-album/2175-1.png?sfvrsn=0" title="phone2175" />
    </div>
  </div>

  <div class="plansCurrent" id="lte" style="display: none;">
    <div class="plansNumbers">
      <ul>
        <li><a class="plansActive" onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('1175').innerHTML"> <img alt="" src="/Postpaid/images/default-source/default-album/nav-1175.png?sfvrsn=0" title="nav-1175" sfref="[images|OpenAccessDataProvider]9a0da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('1675').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-1675.png?sfvrsn=0" title="nav-1675" sfref="[images|OpenAccessDataProvider]a20da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('2175').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-2175.png?sfvrsn=0" title="nav-2175" sfref="[images|OpenAccessDataProvider]aa0da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
        <li><a onclick="document.getElementById('plansNumContent').innerHTML=document.getElementById('3175').innerHTML"><img alt="" src="/Postpaid/images/default-source/default-album/nav-3175.png?sfvrsn=0" title="nav-3175" sfref="[images|OpenAccessDataProvider]b20da950-71ea-6a27-ac25-ff0000b01406" /></a></li>
      </ul>
    </div>

    <div class="plansContent" id="plansNumContent">
      <img alt="" src="/Postpaid/images/default-source/default-album/1175-1.png?sfvrsn=0" title="1175" />
</div>

    <div id="1175" style="display: none;">
        <img alt="" src="/Postpaid/images/default-source/default-album/1175-1.png?sfvrsn=0" title="1175" />
    </div>

    <div id="1675" style="display: none;">
        <img alt="" src="/Postpaid/images/default-source/default-album/1675-1.png?sfvrsn=0" title="1675" />
    </div>

    <div id="2175" style="display: none;">
        <img alt="" src="/Postpaid/images/default-source/default-album/2175-1.png?sfvrsn=0" title="2175" />
    </div>

    <div id="3175" style="display: none;">
        <img alt="" src="/Postpaid/images/default-source/default-album/3175-1.png?sfvrsn=0" title="3175" />
    </div>
  </div>

我做错了什么？如果这看起来还很不清楚，请原谅我。如果有必要的话，我很高兴澄清更多

主要问题：.plansActive在处于.active状态的交换机上有很多错误。

---

谢谢

您的问题可能在这里：

$('.plansNumbers li a').on('click', 
  function() {
    $("a",$(this).parents("ul")).removeClass('plansActive');
    $(this).addClass('plansActive');
  }
);

它看起来像是

。plansActive

应该应用于

li

中的

a

。您正在尝试从所有

ul

中的

a

中删除类，而不是直接父级

ul

尝试更新到：

$('.plansNumbers li a').on('click', 
  function() {
    //Use closest to only get immediate ul parent
    $("a",$(this).closest("ul")).removeClass('plansActive');
    $(this).addClass('plansActive');
  }
);

更新

在添加和删除元素时，您将中断jquery事件处理程序。如果您想继续添加和删除元素，请仔细查看将事件侦听器附加到动态添加的元素。您需要“锚定”到一个不会被添加的元素上，比如（注意，我没有测试过这个）：

就我个人而言，我不会添加和删除，只是隐藏和显示。如下所示：

HTML

<div id="plnMenu">
    <a href="#plnPremium">Premium</a>
    <a href="#plnLTE">LTE</a>
</div>
<div id="plnDisplay">
    <ul class="plans">
        <li id="plnPremium" class="active">
            <ul>
                <li id="pln1175" >
                    <h3>1175</h3>
                    <div>1175 Premium Content</div>
                </li>
                <li id="pln1675" class="active">
                    <h3>1675</h3>
                    <div>1675 Premium Content</div>
                </li>
                <li id="pln2175">
                    <h3>2175</h3>
                    <div>2175 Premium Content</div>
                </li>
                <li id="pln2675">
                    <h3>2675</h3>
                    <div>2675 Premium Content</div>
                </li>
            </ul>
        </li>
        <li id="plnLTE"> 
             <ul>
                <li class="pln1175 active" >
                    <h3>1175</h3>
                    <div>1175 Content</div>
                </li>
                <li class="pln1675">
                    <h3>1675</h3>
                    <div>1675 Content</div>
                </li>
                <li class="pln2175">
                    <h3>2175</h3>
                    <div>2175 Content</div>
                </li>
                <li class="pln2675">
                    <h3>2675</h3>
                    <div>2675 Content</div>
                </li>
            </ul>
        </li>
    </ul>
</div>

javascript

$("#plnMenu>a").click(function(){
    var target = $(this).attr("href");
    $("#plnMenu>a").removeClass("active");
    $(this).addClass("active");
    //console.log(target);
    //console.log($("#plnDisplay .plans>li"));
    $("#plnDisplay .plans>li").removeClass("active");
    console.log($(target));
    $(target).addClass("active");
    return false;
});

$("#plnDisplay .plans>li>ul>li>h3").click(function(){
    $(this).closest("ul").find("li").removeClass("active");
    $(this).closest("li").addClass("active");
});

---

Y您想删除一个类并添加相同的类吗？@Sweetz您的意思是什么？我现在编辑了我的帖子。我的主要问题是，当主选项卡切换到另一个“.active”类时，内部选项卡的活动状态类不再切换。由于某些原因，内部选项卡的“.plansacative”状态的切换受此影响。您是否可以生成一个“cleaner”示例。也许没有内联的“onClick”图像交换。只是复制问题的最低限度。也许还有一个jsFidle（），它看起来完全是过度设计的，就像一团乱麻。您应该考虑使用一个简单但可靠的现成标签库（如果您添加缺少的CSS来显示/隐藏内容），我会喜欢它。它是可重复使用的，即使是肯定的。不幸的是，这个项目刚刚交给了我。我没有把整件事都编出来。由于时间的限制，我不能简单地从头开始构建它，然后按照我的方式实现一个更简单的方法。为什么它可以在页面加载上工作？当未单击主选项卡（.active）时，.plansActive类按预期在每个内部选项卡上工作。一旦这样做，内部制表符“.plansActive将保留在第一个子元素上。不管怎么说，你建议用什么替代呢？我错过了选择器中的上下文。我已经更新了，我认为问题在于你的目标不仅仅是直系父母，而是所有的祖先，还有父母。嗨，乔恩，你的代码没有改变任何东西。一旦我在单击时切换主选项卡，它仍然会在元素的第一个子元素上保留“.plansacative”状态。由于某些原因，主选项卡的切换会影响内部选项卡上类的分配。我刚才还注意到，您正在动态替换内容，这也可能是您的问题的一部分。您需要隐藏/显示合适的内容而不是更改

innerHTML

吗？谢谢。我会用这些建议自己解决剩下的问题。谢谢你，乔恩！

#plnMenu
{
    width:70px;
    position:relative;
    float:left;
    z-index:0;
}

#plnMenu>a
{
    display:block;
    width:70px;
    padding: 10px 3px;
}

#plnMenu>a.active
{
    font-weight:bold;
}

#plnDisplay
{
    width:500px;
    height:300px;
    float:left;
    border:1px solid black;

}
#plnDisplay .plans {padding:5px;}


#plnDisplay .plans>li
{
    display:none;
    position:relative;
    z-index:0;
}

#plnDisplay .plans>li.active
{
    display:block;
}

#plnDisplay .plans>li>ul>li
{
    float:left;
    width:75px;
}

#plnDisplay .plans>li>ul>li>h3
{
    background-color:#fee;
    position:relative;
    font-size:24px;
    padding:6px;
    cursor:pointer;
    z-index:0;
}

#plnDisplay .plans>li>ul>li>div
{
    display:none;
    background-color:#eef;
    border:1px solid black;
    width:476px;
    padding:6px;
    height:236px;
    position:absolute;
    top:40px;
    left:0px;
    z-index:10;
}

#plnDisplay .plans>li>ul>li.active>h3
{
    background-color:#eef;
    border:1px solid black;
    border-bottom:none;
    z-index:100;
}

#plnDisplay .plans>li>ul>li.active>div
{
    display:block;
}

$("#plnMenu>a").click(function(){
    var target = $(this).attr("href");
    $("#plnMenu>a").removeClass("active");
    $(this).addClass("active");
    //console.log(target);
    //console.log($("#plnDisplay .plans>li"));
    $("#plnDisplay .plans>li").removeClass("active");
    console.log($(target));
    $(target).addClass("active");
    return false;
});

$("#plnDisplay .plans>li>ul>li>h3").click(function(){
    $(this).closest("ul").find("li").removeClass("active");
    $(this).closest("li").addClass("active");
});