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

Question

###前提・実現したいこと
JQueryでタブ切り替えをした要素の中にjQueryプラグイン・Swiperを使用したスライダーとjQueryプラグイン・READMOREを使おうとしたのですが最初のタブではきちんと実装されているのですが二つ目のタブからJQueryが効いていません。

色々調べてみたのですが何が原因かわかりません。

調べて思い当たるのはdisplay: none;を使用すると２つめのタブからJQueryが効かないという事です。
display:none;を使わないタブtab
上記サイトを参考に実装してみましたが、一つ目のタブから要素が表示されませんでした。
他のCSSが関係しているのかもしれませんが、解決方法も見つからず、諦めました。

分かる方がいらっしゃいましたら、お力をお借りできれば幸いです。
よろしくお願いいたします。

Swiper：http://idangero.us/swiper/#.WAN9cpiLSRs
READMORE：http://jedfoster.com/Readmore.js/

###HTML

<div class="brd-title clearfix">
<ul class="tab">
<li class="tab_select tab_ti01"><img src="image.png"></li>
<li class="tab_ti02"><img src="image.png"></li>
<li class="tab_ti03"><img src="image.png"></li>
<li class="tab_ti04"><img src="image.png"></li>
<li class="tab_ti05"><img src="image.png"></li>
</ul>
</div>

<ul class="tab_content">
<li class="tab_spe">
<div class="swiper-container">
<div class="swiper-wrapper">

<div class="swiper-slide">
<!-- Slide-01 コンテンツ -->
<ul id="brand_lis" class="clearfix">
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
</ul>
<ul id="brand_lis" class="clearfix">
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
<li class="brand_lis-i">
<dl>
<dt><a href="http://" target="_top"><img src="image/br_img.png"></a></dt>
<dd class="title"><a href="http://" target="_top">ブランド名</a></dd>
<dd id="textOverflow">sample text</dd>
</dl>
</li>
</ul>
</div>

<div class="swiper-slide">
<!-- Slide-02 コンテンツ -->
Slide-01 コンテンツと同じ
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</li>
<li class="hide tab_spe">
タブ1の内容と同じ
</li>
<li class="hide tab_spe">
タブ1の内容と同じ
</li>
<li class="hide tab_spe">
タブ1の内容と同じ
</li>
<li class="hide tab_spe">
タブ1の内容と同じ
</li>
</ul>

###CSS

.tab {
overflow: hidden;
}
.tab li {
float: left;
cursor:pointer;
}
.tab li.tab_select {
cursor:pointer;
}
.tab_content {
width: 820px;
}
.tab_content li.tab_spe {
padding: 20px 10px;
}
.hide {
display: none;
}
#brand_lis {
margin-bottom: 13px;
}
ul#brand_lis-inner {
margin-bottom: 15px;
}
li.brand_lis-i {
width: 266px;
float: left;
margin: 0 !important;
padding: 0 !important;
}
li.brand_lis-i dt {
width: 253px;
height: 198px;
padding: 6px;
margin-bottom: 8px;
}
li.brand_lis-i dt img {
}
li.brand_lis-i dd {
font-size: 11px;
margin-bottom: 3px;
width: 253px;
margin: 0 auto;
}
li.brand_lis-i .title {
font-size: 12px;
font-weight: bold;
margin-bottom: 8px;
text-align: center;
}
li.brand_lis-i .off {
font-size: 12px;
color: #F00;
}
#textOverflow {
width: 253px;
max-height: 80px;
overflow: hidden;
margin-bottom: 5px;
}

###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'
});

Answer 1

・複数bxsliderをタブで切り替えたいのですが…
・slick.jsのスライダー機能をタブ切り替え内で使用する際の落とし穴

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

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

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

Comments

[asami12]

ご回答ありがとうございました。

http://qiita.com/GALE/items/e4479de12a61897aa0eb
こちらを参考にJSとCSSを変更致しました。

JSのみで解決しようとしたのですがうまく行かず、アドバイス通りCSSを使って変更することにしました。

【JS】
$(window).load(function () {
$(function() {
$('.tab li').on('click', function () {
var num = $('.tab li').index(this);
$("li.tab_spe").addClass('panel')
.eq(num)
.removeClass('panel');
$('.tab li').removeClass('tab_select');
$(this).addClass('tab_select');
});
});
});

【CSS】
.tab_spe {
visibility: visible;
height: auto;
}
.panel {
visibility: hidden;
height: 0;
}

上記CSSを追記致しました。

無事、要素内のJSは実装されました。
ありがとうございます。

ですが、ここでCSS上の問題が発生致しました。
.tab_content li.tab_spe {
padding: 10px;
}
と指定している為、２つ目以降タブの要素が段々と下に下がってしまい、レイアウトが崩れてしまいました。
スライダーを指定していないタブ内のul要素に関してはかなりズレてレイアウトが崩れていました。
初心者なものでどうすればいいのか分かりませんでした。

何かいい方法をご存知でしたら、お手数ですがご教示頂けますと幸いです。
よろしくお願いいたします。

[asami12]

試行錯誤の末、無事解決致しました。

$("li.tab_spe").css("padding", "0px");　を追加し

.tab_contentにpadding: 10px;を追加、そして

clearfixのdisplay: block;を
.inTable{
display: inline-table;
}
に変更したところ、レイアウトも崩れず、解決出来ました。

お知恵とお時間いただきまして、ありがとうございました。

[aKusano]

タブの中のスライダーとか、ほんと厄介ですよねー。
でも解決したようでなによりです(^_^)