Javascript Jquery-向选项卡添加下一步按钮

我正在尝试让下一个按钮通过选项卡进行选项卡操作。谢谢你的帮助。html在最前面

提前谢谢

function tabsResponsive() {
    $('.accordion-tabs').each(function(index) {
      $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
    });
    $('.accordion-tabs').on('click', 'li > a.tab-link', function(event) {
      if (!$(this).hasClass('is-active')) {
        event.preventDefault();
        var accordionTabs = $(this).closest('.accordion-tabs');
        accordionTabs.find('.is-open').removeClass('is-open').hide();

        $(this).next().toggleClass('is-open').toggle();
        accordionTabs.find('.is-active').removeClass('is-active');
        $(this).addClass('is-active');
      } else {
        event.preventDefault();
      }
    });

  }


  function tabsNext() {
    $('.nextContaner__link').click(function() {
      $('.tab-link').each(function(index) {

        if ($(this).hasClass('is-active')) {

          $(this).removeClass('is-active');
          $(this).parent().siblings('li').next('').children('a').addClass('is-active');

        } else {
          event.preventDefault();
        }

        // $(this).removeClass('is-active');
        // $(this).parent().siblings('li').next().children('a').addClass('is-active');
      });
    });
  }

---

您可以这样更改您的函数：

function tabsNext() {
  $('.nextContaner__link').click(function() {

    var elem = $(".tab-link.is-active").closest(".tab-header-and-content").next(".tab-header-and-content");
    if(elem.length > 0){
      elem.find("a").trigger("click");  
    }else{
      $(".tab-header-and-content").eq(0).find("a").trigger("click");
    }

  });
}

更新笔：

---

尽管我使用了触发器（“click”），但您可以使用添加/删除类的常规方法

您可以这样更改您的函数：

function tabsNext() {
  $('.nextContaner__link').click(function() {

    var elem = $(".tab-link.is-active").closest(".tab-header-and-content").next(".tab-header-and-content");
    if(elem.length > 0){
      elem.find("a").trigger("click");  
    }else{
      $(".tab-header-and-content").eq(0).find("a").trigger("click");
    }

  });
}

更新笔：

---

尽管我使用了触发器（“click”），但您可以使用添加/删除类的常规方法

简单，不使用链接类，只需选中active tab，然后将下一个选项卡的链接设置为active并从上一个选项卡中删除

您的函数应该如下所示

function tabsNext() {
  $('.nextContaner__link').click(function() {
    var $tab = $(".is-active.tab-link");
    console.log()
    if ($tab.parent().next().hasClass("tab-header-and-content")) {
      $tab.parent().find(".tab-content").hide();
      $tab.parent().next().find("a").addClass("is-active");
      $tab.parent().next().find(".tab-content").show();
      $tab.removeClass("is-active")
    }else {
      $tab.parent().find(".tab-content").hide();
      $tab.removeClass("is-active");
      $(".tab-header-and-content").eq(0).find(".tab-link").addClass("is-active"); 
      $(".tab-header-and-content .tab-content").eq(0).show();
    }

  });
}

下面是一个片段，请全屏执行：

函数选项卡响应（）{
$（“.手风琴选项卡”）。每个（函数（索引）{
$（this）.children（'li'）.first（）.children（'a'）.addClass（'is-active'）.next（）.addClass（'is-open'）.show（）；
});
$（'.accordion tabs'）。在（'click'，'li>a.tab-link'，函数（事件）{
if（！$（this）.hasClass（'is-active'））{
event.preventDefault（）；
var accordionTabs=$（this）.closest（'.accordionTabs'）；
accordionTabs.find（'.is open'）.removeClass（'is-open'）.hide（）；
$（this.next（）.toggleClass（'is-open'）.toggle（）；
accordionTabs.find（'.is-active'）.removeClass（'is-active'）；
$（this.addClass（'is-active'）；
}否则{
event.preventDefault（）；
}
});
}
函数tabsNext（）{
$（'.nextContainer\uuu link'）。单击（函数（）{
var$tab=$（“.is active.tab link”）；
if（$tab.parent（）.next（）.hasClass（“选项卡标题和内容”））{
$tab.parent（）.find（“.tab内容”）.hide（）；
$tab.parent（）.next（）.find（“a”）.addClass（“处于活动状态”）；
$tab.parent（）.next（）.find（“.tab内容”）.show（）；
$tab.removeClass（“处于活动状态”）
}否则{
$tab.parent（）.find（“.tab内容”）.hide（）；
$tab.removeClass（“处于活动状态”）；
$（“.tab标题和内容”）.eq（0）.find（“.tab链接”）.addClass（“处于活动状态”）；
$（“.tab标题和内容.tab内容”）.eq（0.show（）；
}
});
}
//--------------------------------------------------------------------------------------------------------------
//文件准备就绪
$（函数（）{
tabsResponsive（）；
tabsNext（）；
}); // 结束文件准备就绪
//--------------------------------------------------------------------------------------------------------------
//窗口负载
$（窗口）。加载（函数（）{
w=$（窗口）.width（）；
}); // 端窗荷载
//--------------------------------------------------------------------------------------------------------------
//调整窗口大小
//var树脂定时器；
//$（窗口）.on（'resize orientationchange'，function（）{
//
//如果（w！==$（窗口）.width（））{
//
//clearTimeout（resizeTimer）；
//
////被耽搁的东西
//resizeTimer=setTimeout（函数（）{
//
//
//     }, 600);
//
//
//w=$（窗口）.width（）；
//   }
// });  // 结束窗口调整大小

。手风琴选项卡{
边缘顶端：40px；
}
html{
线高：1.15；
/* 1 */
-ms文本大小调整：100%；
/* 2 */
-webkit文本大小调整：100%；
/* 2 */
}
/*部分
========================================================================== */
/**
*删除所有浏览器中的边距（自以为是）。
*/
身体{
保证金：0；
}
/**
*在IE 9-中添加正确的显示。
*/
文章
在一边
页脚，
标题，
导航，
部分{
显示：块；
}
/**
*更正'section'中'h1'元素的字体大小和边距，以及
*Chrome、Firefox和Safari中的'article'上下文。
*/
h1{
字号：2em；
利润率：0.67em0；
}
/*分组内容
========================================================================== */
/**
*在IE 9-中添加正确的显示。
*/
figcaption，
身材{
显示：块；
}
/**
*在IE 8中添加正确的边距。
*/
身材{
利润率：1米40像素；
}
/**
* 1. 在Firefox中添加正确的框大小。
* 2. 在边缘和IE中显示溢出。
*/
人力资源{
框大小：内容框；
/* 1 */
身高：0；
/* 1 */
溢出：可见；
/* 2 */
}
/**
*在IE中添加正确的显示。
*/
主要{
显示：块；
}
/**
* 1. 更正所有浏览器中字体大小的继承和缩放。
* 2. 更正所有浏览器中奇怪的'em'字体大小。
*/
前{
字体系列：monospace，monospace；
/* 1 */
字号：1em；
/* 2 */
}
/*链接
========================================================================== */
/**
* 1. 删除IE 10中活动链接上的灰色背景。
* 2. 删除iOS 8+和Safari 8+中下划线链接中的空白。
*/
a{
背景色：透明；
/* 1 */
-webkit文本装饰跳过：对象；
/* 2 */
}
/*文本级语义
========================================================================== */
/**
* 1. 删除Chrome 57-和Firefox 39-中的底部边框。
* 2. 在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。
*/
缩写[标题]{
边框底部：无；
/* 1 */
文字装饰：下划线；
/* 2 */
文字装饰：下划线虚线；
/* 2 */
}
/**
*通过Safari 6中的下一条规则防止重复应用“bolder”。
*/
B
强壮的{
字体大小：继承；
}
/**
*在Chrome、Edge和Safari中添加正确的字体大小。
*/
B
强壮的{
字体大小：粗体；
}
/**
* 1. 更正所有浏览器中字体大小的继承和缩放。
* 2. 更正所有浏览器中奇怪的'em'字体大小。
*/
代码，
kbd，
桑普{
字体系列：monospace，monospace；
/* 1 */
字号：1em；
/* 2 */
}
/**
*在Android 4.3-中添加正确的字体样式。
*/
dfn{
字体：斜体；
}
/**
*在IE 9-中添加正确的背景和颜色。
*/
标记{
背景色：#ff0；
颜色：#000；
}
/**
*在所有浏览器中添加正确的字体大小。
*/
小的{
字号：80%；
}
/**
*防止“sub”和“sup”元素