如何在点击时将活动类设置为一页中的多个选项卡

How to set active class to multiple tabs in one page onclick?

本文关键字：一页 选项 设置 活动      更新时间：2023-09-26

我在一个页面中有多个选项卡，并且在为所选菜单设置活动类时遇到问题。如果我只有一组选项卡，它就会很好地工作。如果我单击第一个选项卡菜单，第二个选项卡菜单将失去其活动类。淡入淡出效果也不起作用。请帮忙。谢谢。在这里摆弄。

$(".tabs a").click(function() {
  $(".tabs a").parent().removeClass("active");
  $(this).parent().addClass("active").fadeIn('slow');
});

这样做 

$(".tabs a").click(function(e) {
   e.preventDefault();
   var p = $(this).closest('.tabs');
   var i = '#'+$(this).attr('data-tab');
   $(this).closest('ul').find('li').removeClass("active");
   $(this).parent().addClass('active');
   $(p).find('.tabInner div').hide();
   $(p).find(i).fadeIn('slow');
});

小提琴示例

尝试此操作以修复选项卡的选择：

$(".tabs a").click(function () {
    $(this).closest('ul').find('li').removeClass("active");
    $(this).parent().addClass("active").fadeIn('slow');
    $(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});

js小提琴示例

相关文章：