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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

9979閲覧

複数bxsliderをタブで切り替えたいのですが…

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

2クリップ

投稿2015/10/14 07:36

初めまして。

現在仕事でECサイトを作成しているのですが、複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

bxslider.js

サイトのコード記述は下記の通りです。

HTML

1<ul id="tab"> 2<li class="select">総合</li> 3<li>トップス</li> 4<li>ボトムス</li> 5</ul> 6 7<!--rank01--> 8<div class="content_wrap"> 9 10<div class="bx-wrapper"> 11<div class="bx-viewport"> 12 13<div class="slider1"> 14<div class="slide"> 15<img src="sp_index/img/thumb01.jpg" /> 16</div> 17<div class="slide"> 18<img src="sp_index/img/thumb01.jpg" /> 19</div> 20<div class="slide"> 21<img src="sp_index/img/thumb01.jpg" /> 22</div> 23<div class="slide"> 24<img src="sp_index/img/thumb01.jpg" /> 25</div> 26<div class="slide"> 27<img src="sp_index/img/thumb01.jpg" /> 28</div> 29<div class="slide"> 30<img src="sp_index/img/thumb01.jpg" /> 31</div> 32<div class="slide"> 33<img src="sp_index/img/thumb01.jpg" /> 34</div> 35<div class="slide"> 36<img src="sp_index/img/thumb01.jpg" /> 37</div> 38<div class="slide"> 39<img src="sp_index/img/thumb01.jpg" /> 40</div> 41<div class="slide"> 42<img src="sp_index/img/thumb01.jpg" /> 43</div> 44</div> 45 46</div><!--//bx-viewport--> 47</div><!--//bx-wrapper--> 48</div><!--//content_wrap--> 49 50<!--rank02--> 51<div class="content_wrap disnon"> 52 53<div class="bx-wrapper"> 54<div class="bx-viewport"> 55 56<div class="slider1"> 57<div class="slide"> 58<img src="sp_index/img/thumb02.jpg" /> 59</div> 60<div class="slide"> 61<img src="sp_index/img/thumb02.jpg" /> 62</div> 63<div class="slide"> 64<img src="sp_index/img/thumb02.jpg" /> 65</div> 66<div class="slide"> 67<img src="sp_index/img/thumb02.jpg" /> 68</div> 69<div class="slide"> 70<img src="sp_index/img/thumb02.jpg" /> 71</div> 72<div class="slide"> 73<img src="sp_index/img/thumb02.jpg" /> 74</div> 75<div class="slide"> 76<img src="sp_index/img/thumb02.jpg" /> 77</div> 78<div class="slide"> 79<img src="sp_index/img/thumb02.jpg" /> 80</div> 81<div class="slide"> 82<img src="sp_index/img/thumb02.jpg" /> 83</div> 84<div class="slide"> 85<img src="sp_index/img/thumb02.jpg" /> 86</div> 87</div> 88 89</div><!--//bx-viewport--> 90</div><!--//bx-wrapper--> 91</div><!--//content_wrap--> 92 93 94<!--rank03--> 95<div class="content_wrap disnon"> 96 97<div class="bx-wrapper"> 98<div class="bx-viewport"> 99 100<div class="slider1"> 101<div class="slide"> 102<img src="sp_index/img/thumb01.jpg" /> 103</div> 104<div class="slide"> 105<img src="sp_index/img/thumb01.jpg" /> 106</div> 107<div class="slide"> 108<img src="sp_index/img/thumb01.jpg" /> 109</div> 110<div class="slide"> 111<img src="sp_index/img/thumb01.jpg" /> 112</div> 113<div class="slide"> 114<img src="sp_index/img/thumb01.jpg" /> 115</div> 116<div class="slide"> 117<img src="sp_index/img/thumb01.jpg" /> 118</div> 119<div class="slide"> 120<img src="sp_index/img/thumb01.jpg" /> 121</div> 122<div class="slide"> 123<img src="sp_index/img/thumb01.jpg" /> 124</div> 125<div class="slide"> 126<img src="sp_index/img/thumb01.jpg" /> 127</div> 128<div class="slide"> 129<img src="sp_index/img/thumb01.jpg" /> 130</div> 131</div> 132 133</div><!--//bx-viewport--> 134</div><!--//bx-wrapper--> 135</div><!--//content_wrap--> 136

bxslider cssはほぼダウンロードしたままを使用していますが、
タブに対するcssはこちらです。

CSS

1ul#tab{ 2 display:table; 3 table-layout:fixed; 4 width:100%; 5} 6 7#tab li.select { 8 background: none repeat scroll 0% 0% #fff; 9 color:#000; 10 border-top:#d9d9d9 1px solid; 11 border-left:#d9d9d9 1px solid; 12 border-right:#d9d9d9 1px solid; 13} 14 15#tab li { 16 display:table-cell; 17 padding: 10px; 18 list-style: none outside none; 19 cursor: pointer; 20 background: none repeat scroll 0% 0% #d9d9d9; 21 text-align:center; 22 border:#FFFFFF 1px solid; 23 border-top-left-radius:5px; /* 左上角丸 */ 24 border-top-right-radius:5px; 25 color:#666; 26 font-size:8px; 27} 28 29 30.content_wrap { 31 width: 100%; 32 height:auto; 33 font-size: 20px; 34 text-align: center; 35 line-height: 100px; 36 background: none repeat scroll 0% 0% #fff; 37 color: #000; 38 overflow:hidden; 39} 40 41.disnon { 42 display: none; 43} 44

タブのJava Scriptは

Java

1$(function() { 2 $("#tab li").click(function() { 3 var num = $("#tab li").index(this); 4 $(".content_wrap").addClass('disnon'); 5 $(".content_wrap").eq(num).removeClass('disnon'); 6 $("#tab li").removeClass('select'); 7 $(this).addClass('select') 8 }); 9}); 10

sliderの方のJava Scriptは

Java

1$(document).ready(function(){ 2 $('.slider1').bxSlider({ 3 slideWidth: 200, 4 minSlides: 3, 5 maxSlides: 3, 6 slideMargin: 10, 7 }); 8}); 9

以上です。

まだまだ知識も浅く、Java Scriptに関しては特に勉強不足で、いつもJqueryを手探りで実装している状態です。
この文章で質問事項もしっかりと伝わっているのか不安ですが、どなたかアドバイスお願いできますでしょうか。

よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1$(function () {});

は、「HTMLが読み込み完了された時に実行する」という意味ですが、display:none に設定されたものは「存在していない」ことと同義です。つまり、タブの2番目以降は、存在していないので、そこに bxSlider は生成されません。

2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処します。


html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8"> 5 <title>タブテスト</title> 6 <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/sp_style.css" /> 7 <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_index/tab.css" /> 8 <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/jquery.bxslider.css" /> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 10 <script src="http://www.lyckatill.jp/ltr_www/js/jquery.bxslider.min.js"></script> 11 </head> 12 13 <body> 14 15 <ul id="tab"> 16 <li class="select">総合</li> 17 <li>トップス</li> 18 <li>ボトムス</li> 19 </ul> 20 21 <!--rank01--> 22 <div class="content_wrap"> 23 24 <div class="bx-wrapper"> 25 <div class="bx-viewport"> 26 27 <div class="slider1"> 28 <div class="slide"> 29 <img src="http://dummyimage.com/320x240" /> 30 </div> 31 <div class="slide"> 32 <img src="http://dummyimage.com/320x240" /> 33 </div> 34 <div class="slide"> 35 <img src="http://dummyimage.com/320x240" /> 36 </div> 37 <div class="slide"> 38 <img src="http://dummyimage.com/320x240" /> 39 </div> 40 <div class="slide"> 41 <img src="http://dummyimage.com/320x240" /> 42 </div> 43 <div class="slide"> 44 <img src="http://dummyimage.com/320x240" /> 45 </div> 46 <div class="slide"> 47 <img src="http://dummyimage.com/320x240" /> 48 </div> 49 <div class="slide"> 50 <img src="http://dummyimage.com/320x240" /> 51 </div> 52 <div class="slide"> 53 <img src="http://dummyimage.com/320x240" /> 54 </div> 55 <div class="slide"> 56 <img src="http://dummyimage.com/320x240" /> 57 </div> 58 </div> 59 60 </div><!--//bx-viewport--> 61 </div><!--//bx-wrapper--> 62 </div><!--//content_wrap--> 63 64 <!--rank02--> 65 <div class="content_wrap"> 66 67 <div class="bx-wrapper"> 68 <div class="bx-viewport"> 69 70 <div class="slider1"> 71 <div class="slide"> 72 <img src="http://dummyimage.com/320x240" /> 73 </div> 74 <div class="slide"> 75 <img src="http://dummyimage.com/320x240" /> 76 </div> 77 <div class="slide"> 78 <img src="http://dummyimage.com/320x240" /> 79 </div> 80 <div class="slide"> 81 <img src="http://dummyimage.com/320x240" /> 82 </div> 83 <div class="slide"> 84 <img src="http://dummyimage.com/320x240" /> 85 </div> 86 <div class="slide"> 87 <img src="http://dummyimage.com/320x240" /> 88 </div> 89 <div class="slide"> 90 <img src="http://dummyimage.com/320x240" /> 91 </div> 92 <div class="slide"> 93 <img src="http://dummyimage.com/320x240" /> 94 </div> 95 <div class="slide"> 96 <img src="http://dummyimage.com/320x240" /> 97 </div> 98 <div class="slide"> 99 <img src="http://dummyimage.com/320x240" /> 100 </div> 101 </div> 102 103 </div><!--//bx-viewport--> 104 </div><!--//bx-wrapper--> 105 </div><!--//content_wrap--> 106 107 108 <!--rank03--> 109 <div class="content_wrap"> 110 111 <div class="bx-wrapper"> 112 <div class="bx-viewport"> 113 114 <div class="slider1"> 115 <div class="slide"> 116 <img src="http://dummyimage.com/320x240" /> 117 </div> 118 <div class="slide"> 119 <img src="http://dummyimage.com/320x240" /> 120 </div> 121 <div class="slide"> 122 <img src="http://dummyimage.com/320x240" /> 123 </div> 124 <div class="slide"> 125 <img src="http://dummyimage.com/320x240" /> 126 </div> 127 <div class="slide"> 128 <img src="http://dummyimage.com/320x240" /> 129 </div> 130 <div class="slide"> 131 <img src="http://dummyimage.com/320x240" /> 132 </div> 133 <div class="slide"> 134 <img src="http://dummyimage.com/320x240" /> 135 </div> 136 <div class="slide"> 137 <img src="http://dummyimage.com/320x240" /> 138 </div> 139 <div class="slide"> 140 <img src="http://dummyimage.com/320x240" /> 141 </div> 142 <div class="slide"> 143 <img src="http://dummyimage.com/320x240" /> 144 </div> 145 </div> 146 147 </div><!--//bx-viewport--> 148 </div><!--//bx-wrapper--> 149 </div><!--//content_wrap--> 150 151 <script type="text/javascript"> 152 $(function () { 153 154 $("#tab li").on('click', function () { 155 var num = $("#tab li").index(this); 156 $(".content_wrap").addClass('disnon') 157 .eq(num) 158 .removeClass('disnon'); 159 $("#tab li").removeClass('select'); 160 $(this).addClass('select'); 161 }); 162 163 $('.slider1').bxSlider({ 164 slideWidth: 200, 165 minSlides: 3, 166 maxSlides: 3, 167 slideMargin: 10 168 }); 169 170 $("#tab li:first").click(); 171 172 }); 173 </script> 174 </body> 175</html>

投稿2015/10/14 08:01

編集2015/10/14 15:34
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2015/10/14 08:21

ご回答いただきまして、ありがとうございます。 つまりは下記CSSが問題ということでしょうか。 .disnon { display: none; } 2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処します。 >こちらは具体的にどこに何を記述する良いのでしょうか。  知識不足でお手数をおかけしまして申し訳ありませんが…アドバイスいただけますと幸いです。
退会済みユーザー

退会済みユーザー

2015/10/14 08:43

タブにどんなスクリプトを使っているのかなど、情報が不足しているので具体的な回答ができません。 まずは、こちらで現象を再現できる(あなたの手元で起こっている現象をそのまま再現できる)ミニマムソースを提示してください。 こちらでコピペすればそのまま再現できる状態で。
退会済みユーザー

退会済みユーザー

2015/10/14 13:52 編集

何度もありがとうございます。 ミニマムソースとなっているかわかりませんが、こちらでご確認いただけますでしょうか。 ```HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>タブテスト</title> <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/sp_style.css" /> <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_index/tab.css" /> <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://www.lyckatill.jp/ltr_www/js/jquery.bxslider.min.js"></script> </head> <body> <ul id="tab"> <li class="select">総合</li> <li>トップス</li> <li>ボトムス</li> </ul> <!--rank01--> <div class="content_wrap"> <div class="bx-wrapper"> <div class="bx-viewport"> <div class="slider1"> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> </div> </div><!--//bx-viewport--> </div><!--//bx-wrapper--> </div><!--//content_wrap--> <!--rank02--> <div class="content_wrap disnon"> <div class="bx-wrapper"> <div class="bx-viewport"> <div class="slider1"> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb02.jpg" /> </div> </div> </div><!--//bx-viewport--> </div><!--//bx-wrapper--> </div><!--//content_wrap--> <!--rank03--> <div class="content_wrap disnon"> <div class="bx-wrapper"> <div class="bx-viewport"> <div class="slider1"> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> <div class="slide"> <img src="sp_index/img/thumb01.jpg" /> </div> </div> </div><!--//bx-viewport--> </div><!--//bx-wrapper--> </div><!--//content_wrap--> <script type="text/javascript"> $(function() { $("#tab li").click(function() { var num = $("#tab li").index(this); $(".content_wrap").addClass('disnon'); $(".content_wrap").eq(num).removeClass('disnon'); $("#tab li").removeClass('select'); $(this).addClass('select') }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $('.slider1').bxSlider({ slideWidth: 200, minSlides: 3, maxSlides: 3, slideMargin: 10, }); }); </script> ``` よろしくお願い致します。
退会済みユーザー

退会済みユーザー

2015/10/14 15:34

回答に追記しました
退会済みユーザー

退会済みユーザー

2015/10/15 04:16

遅くなりました。 ご丁寧に回答していただき、本当にありがとうございます! 実装してみたら、2つ目以降も出てきました。とても助かりました! これだけお答えいただき大変失礼なのですが、、、 まだたまに出てこない時も発生するようなのですが(こちらの問題でしょうか。。)別の書き方もあったりしますでしょうか。 何度も申し訳ありません。
退会済みユーザー

退会済みユーザー

2015/10/15 04:37

でも、まず根本的な問題が解決しましたのでベストアンサーとさせていただきました。 Java Scriptもっと習得していきたいと思います。ありがとうございます。
退会済みユーザー

退会済みユーザー

2015/10/15 05:55

> まだたまに出てこない時も発生する タブと他のJavacriptを使った機能の相性は悪いです。bxSliderに限った話ではありません。 https://teratail.com/questions/2984 > 別の書き方もあったりしますでしょうか。 bxSlider に 使えそうなメソッドがないか探してみましたけど、なかったですね。 タブで表示されることを想定してゼロベースでプラグインを描き起こせば、できなくはないでしょうけど、ボランティアでやる作業量ではないですね…。
退会済みユーザー

退会済みユーザー

2015/10/15 07:40

回答ありがとうございます。 相性が悪いのですね、色々と勉強不足で申し訳ありません。 しかもメソッドを新たに探していただきまして、ありがとうございます。 ここまで形になっただけでも本当に助かりました。 お時間いただきまして、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問