选项卡处于活动状态时更改子（孙）类答案

【问题标题】：Change the child(grandchild) class when tab is active选项卡处于活动状态时更改子（孙）类
【发布时间】：2016-03-25 00:44:13
【问题描述】：

我在 google 和这个论坛上四处寻找，但找不到我需要的东西，或者我不知道如何将它应用到我的代码中。

我尝试完成的是在选择选项卡时更改图标（突出显示它）。对于我使用 sprite img 的图标，{{ icon }} 是一个包含图标名称的列表。

HTML：

<ul class="nav nav-icons" role ="tablist">
  {% for icon in icon_list1 %}
   <li class="nav-item">
     <a href="#{{icon}}" role="tab" aria-controls="{{icon}}" data-toggle="pill" aria-expanded="false">
       <div class="icon-{{icon}}"></div>
     </a>
   </li>
  {% endfor %}
</ul>

我的页面上有 3 次此代码，不同部分的 icon_list 不同。我希望当页面加载时每个列表中的第一个项目处于活动状态并突出显示（红色图标）

$( document ).ready(function() {
    $('.nav.nav-icons .nav-item:first-child').addClass('active');
    $('.nav-item').find('div').toggleClass(function(){
        var className = $(this).attr('class');          
        var classRed = className + '-red';          
        if ( $( this ).parents().is( ".active" ) ) {            
            return classRed ;               
        }else{      
            return className;

        }
    });
 });

so here when the li elem is active div class is changed from 'icon-name' to 'icon-name-red' and when another tab is selected, same thing but the previous div class to be changed back to 'icon -姓名'。问题是当我添加点击事件时，我必须点击两次才能发生某些事情。

我希望有人可以帮助我。

谢谢

【问题讨论】：

标签： javascript python html tabs

【解决方案1】：

我确实找到了解决问题的方法，所以也许这对任何人都有帮助。

$( document ).ready(function() {
 //activate the first item in the list
    $('.nav.nav-icons .nav-item:first-child').addClass('active');   
    $('.nav-item.active').find("div").attr('class',function(i, v) {
        return v.replace('-white', '-red');
    });         
});
 //this code is for each icon_list
$(function(){        
   $('.nav-item.list1').unbind('click');
   $('.nav-item.list1').on('click',
     function(){    
       $(this).toggleClass('active');                   
       if ( $( this ).hasClass('active')){  
          $('.nav-item.list1 ').find("div").attr('class',function(i, v) {
            return v.replace('-red', '-white');
          });               
          $(this).find("div").attr('class',function(i, v) {
            return v.replace('-white', '-red');
          });
      }
      $(this).toggleClass('active');    
   });

我只是希望有人有更好的解决方案或者一些想法来改进我的。

【讨论】：