主页 / 问题 / 1209236
Accepted
Tempest
Asked:2021-11-25 00:07:13 +0000 UTC2021-11-25 00:07:13 +0000 UTC

你能解释一下这个功能吗？

  • 772

很明显，当单击 ul.tabs__caption 时会触发一个事件，接下来会发生什么？

(function($) {
$(function() {
  
  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
  });
  
});
})(jQuery);

javascript

1 个回答

  1. Best Answer

    在li其上缺少该类.active，单击时会挂起一个功能：

    第一行：

    • 将活动类添加到单击的 li.addClass('active')
    • 将其余元素置于同一级别siblings()并删除它们的活动类.removeClass('active')

    第二行：

    • 使用 .tabs 类获取最近的 divclosest('div.tabs')
    • 找到其中包含 .tabs__content 类的 div，find('div.tabs__content')并删除所有找到的 div 中的活动类.removeClass('active')
    • 获取具有单击的 li 的索引号（从零开始编号）的元素并在eq($(this).index())那里添加活动类.addClass('active')

    $(this)这是当前的 li 元素（被点击）

    也就是实际上在li元素中切换活动类，在div中切换活动类，同时考虑到按下的li元素

    • 1

相关问题