Q&A初めまして。
現在仕事でECサイトを作成しているのですが、複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。
試してみると、１つ目はsliderがきちんと表示されていますが、
２つ目タブ以降が中身が表示されない状態となってしまいました。
サイトのコード記述は下記の通りです。
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を手探りで実装している状態です。
この文章で質問事項もしっかりと伝わっているのか不安ですが、どなたかアドバイスお願いできますでしょうか。
よろしくお願い致します。
回答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
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/14 08:21
退会済みユーザー
2015/10/14 08:43
退会済みユーザー
2015/10/14 13:52 編集
退会済みユーザー
2015/10/14 15:34
退会済みユーザー
2015/10/15 04:16
退会済みユーザー
2015/10/15 04:37
退会済みユーザー
2015/10/15 05:55
退会済みユーザー
2015/10/15 07:40