javascript - 选项卡图标在事件和非事件时切换

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();