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

我不确定是不是这种情况，因为你没有附加一个片段来重现问题，但很可能就是这样。

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

$(".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();
    }
});

Answer 2

您没有准确地公开您当前在相关标签中添加/删除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();

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

2 个答案: