タブ切り替え要素の中にスライダーや他のJavascriptを使いたい時

js

/* タブ切り替え ========================================================*/ $(function() { $(‘.tab li’).on(‘click’, function () { var num = $(‘.tab li’).index(this); $(“li.tab_spe”).addClass(‘hide’) .eq(num) .removeClass(‘hide’); $(‘.tab li’).removeClass(‘tab_select’); $(this).addClass(‘tab_select’) }); }); /* readmore ========================================================*/ $(document).ready(function() { $(‘#textOverflow’).readmore({ speed: 100, maxHeight: 80, moreLink: ‘<a href=”#”>→続きを読む</a>’, lessLink: ‘<a href=”#”>←閉じる</a>’ }); }); /* swiper ========================================================*/ var mySwiper = $(‘.swiper-container’).swiper({ pagination: ‘.swiper-pagination’, speed: 2000, centeredSlides: true, paginationClickable:true, calculateHeight:true, nextButton: ‘.swiper-button-next’, prevButton: ‘.swiper-button-prev’ });

このあたり参考になるかと思います。（直接の答えではありませんが）
タブ切り替えにdisplay:none;が使用されていると、2つ目以降のタブ内にあるスライダーは$(function(){});のタイミングでは存在しませんので、実行されません。

そこで方法としては、
①スライダー実行のタイミングを変更する
②タブ切り替えの方法をdisplay:none;ではなくvisibility:hidden;+height:0;に変更する
といった手段を検討することになるかと思われます。

CSSを変えたくないなら①の方向性で検討することになるでしょうが、
たぶん②の方が簡単だと思います。

参考サイト

タブ切り替え要素の中にスライダーや他のJSを使いたい

###前提・実現したいこと JQueryでタブ切り替えをした要素の中にjQueryプラグイン・Swiperを使用したスライダーとjQueryプラグイン・READMOREを使おうとしたのですが最初のタ

teratail.com