質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

12257閲覧

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

asami12

総合スコア12

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

4クリップ

投稿2016/10/16 13:36

編集2016/10/16 18:36

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

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

調べて思い当たるのはdisplay: none;を使用すると2つめのタブから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' });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

投稿2016/10/16 16:49

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asami12

2016/10/16 18:58

ご回答ありがとうございました。 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; } と指定している為、2つ目以降タブの要素が段々と下に下がってしまい、レイアウトが崩れてしまいました。 スライダーを指定していないタブ内のul要素に関してはかなりズレてレイアウトが崩れていました。 初心者なものでどうすればいいのか分かりませんでした。 何かいい方法をご存知でしたら、お手数ですがご教示頂けますと幸いです。 よろしくお願いいたします。
asami12

2016/10/16 19:46 編集

試行錯誤の末、無事解決致しました。 $("li.tab_spe").css("padding", "0px"); を追加し .tab_contentにpadding: 10px;を追加、そして clearfixのdisplay: block;を .inTable{ display: inline-table; } に変更したところ、レイアウトも崩れず、解決出来ました。 お知恵とお時間いただきまして、ありがとうございました。
aKusano

2016/10/16 21:19

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問