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

时间：2014-08-27 05:43:09

标签： jquery css

目标是在点击时切换.active类。主要标签使用＆＃34; .active＆＃34;内部选项卡使用＆＃34; .plansActive。＆＃34;：

enter image description here

什么有效：

  • 类别窗格适用（＆＃34; .active＆＃34;），因为它应该以这种方式编码：

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

  • 内部标签也适用（在加载时）。

什么不是：

  • 当类别从默认类别切换时出现错误（＆＃34; .active仍然有效＆＃34;）：

enter image description here

  • 内部标签不再切换到其他标签（＆＃34; .plansActive＆＃34;），但会显示各自的内容。

  • 这是内部标签的代码：

    $('.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状态的交换机上非常错误。

谢谢！

1 个答案:

答案 0 :(得分：0)

你的问题可能在这里：

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

看起来.plansActive应该应用于a中的li。您正尝试从所有a中的ul而不是直接父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事件处理程序。如果您想继续添加和删除元素，请在jquery's on method附近查看，以将事件侦听器附加到动态添加的元素。你需要“锚定”一个不会被添加的元素（注意我还没有测试过）：

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

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

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

CSS 带有一些非常粗糙的样式

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

<强>的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");
});

Demo

相关问题
最新问题