选项卡图标在活动和非活动时切换

Question

我有 5 个标签，当一个标签处于活动状态时应该出现白色图标，当它处于非活动状态时应该出现红色图标。

请参考以下代码：

<nav>
   <ul>
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'openTrips')"  id="defaultOpen" >
            <span >
            <img src="../resources/images/otp-not-received -inactive.svg" class="inactive" />
            <img src="../resources/images/otp-not-received.svg"   class="activeicon" />
            </span>
            <p>
               OTP Not Received (<span id="notReceivecount"></span>)
            </p>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'inProgressTrips')">
            <span >
            <img src="../resources/images/otp-received-inactive.svg" class="inactive"/>
            <img src="../resources/images/otp-received.svg" class="activeicon" />
            </span>
            <p> OTP Received In Progress (<span id="receivecount"></span>)</p>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'generateInvoice')">
            <span>
            <img src="../resources/images/ready-to-invoice-inactive.svg" class="inactive" />
            <img src="../resources/images/ready-to-invoice.svg" class="activeicon"/>
            </span>
            <p>Ready for Invoice (<span id="readyForInvoiceCount"></span>)</p>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'invoiceData')">
            <span>
            <img src="../resources/images/invoiced -inactive.svg" class="inactive" />
            <img src="../resources/images/invoiced.svg"  class="activeicon" />
            </span>
            <p>Invoiced (<span id="invoiceCount"></span>)</p>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'invoiceProcessedData')">
            <span >
            <img src="../resources/images/paid-inactive.svg" class="inactive"/>
            <img src="../resources/images/paid.svg"  class="activeicon"/>
            </span>
            <p>Paid/Settlement (<span id="paidCount"></span>)</p>
         </a>
      </li>
   </ul>
</nav>

就绪函数中的JS代码

 if($(".tabs-style-fillup nav ul li a").hasClass('active')){
           $(".tabs-style-fillup nav ul li a.active img.inactive").hide();
           $(".tabs-style-fillup nav ul li a.active img.activeicon").show();
         }else{
            $(".tabs-style-fillup nav ul li a img.inactive").show();
           $(".tabs-style-fillup nav ul li a img.activeicon").hide();
         }

我想在标签没有活动类时显示非活动图标，现在对于活动选项卡它正在工作，但对于非活动选项卡图标没有显示。它正在检查所有选项卡的条件，所以最初它正在获取活动类并隐藏所有标签的所有非活动图标。

Answer 1

您没有准确地公开您当前如何在相关选项卡中添加/删除 active 类。
无论如何，我建议你放弃它，只需在 $(document).ready() 函数中添加以下内容：

var context = $('.tabs-style-fillup nav'),
    activeIcons = $('.activeicon', context),
    inactiveIcons = $('inactive', context);
$('.nav-link', context).on(
  'click',
  function() {
    activeIcons.hide();
    $('.activeicon', this).show();
    inactiveIcons.show();
    $('.inactive', this).hide();
  }
);
// init all, activating default tab
$('#defaultOpen').click();

Answer 2

我不确定是否是这种情况，因为您没有附加 sn-p 来重现问题，但很可能是这样。

您应该将检查类更改为循环，以便为每个元素执行此操作。

$(".tabs-style-fillup nav ul li a").each(function(i, e) {
    var that = $(e);
    if (that.hasClass('active')) {
        that.find("img.inactive").hide();
        that.find("img.activeicon").show();
    } else {
        that.find("img.inactive").show();
        that.find("img.activeicon").hide();
    }
});