初めまして。
現在、仕事でECサイトを作成しているのですが、
複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。
試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。
■仕様したJquery【bxslider】
http://bxslider.com/
サイトのコード記述は下記の通りです。
HTML-------------------------------
<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">
※rank02同様
</div>
</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->
jquery.bxslider.cssはほぼダウンロードしたままを使用していますが、
タブに対するcssはこちらです。
CSS-------------------------------
ul#tab{
display:table;
table-layout:fixed;
width:100%;
}
#tab li.select {
background: none repeat scroll 0% 0% #fff;
color:#000;
border-top:#d9d9d9 1px solid;
border-left:#d9d9d9 1px solid;
border-right:#d9d9d9 1px solid;
}
#tab li {
display:table-cell;
padding: 10px;
list-style: none outside none;
cursor: pointer;
background: none repeat scroll 0% 0% #d9d9d9;
text-align:center;
border:#FFFFFF 1px solid;
border-top-left-radius:5px; /* 左上角丸 */
border-top-right-radius:5px;
color:#666;
font-size:8px;
}
.content_wrap {
width: 100%;
height:auto;
font-size: 20px;
text-align: center;
line-height: 100px;
background: none repeat scroll 0% 0% #fff;
color: #000;
overflow:hidden;
}
.disnon {
display: none;
}
タブのJava Scriptは、
Java Script-------------------------------
$(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')
});
});
sliderの方のJava Scriptは、
Java Script-------------------------------
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
});
以上です。
まだまだ知識も浅く、Java Scriptに関しては特に勉強不足で、いつもJqueryを手探りで実装している状態です。
この文章で質問事項もしっかりと伝えることが出来ているのか不安ですが、どなたか良きアドバイスお願いできますでしょうか。
よろしくお願い致します。
No.1
- 回答日時:
ちゃんと追いかけてないので、半分想像の回答ですので申し訳ないのですが・・・
boxsliderの設定時に、関係要素が非表示だと要素サイズなどが取得できずに、設定がうまくできないのが原因ではないかと推測します。
以下の手順で設定してみてもうまくいかないでしょうか?
1)HTMLの初期表示状態は、CSS等で非表示としない。
(特にタブなどを)
2)document.readyでboxsliderの設定を行う。
3)上記設定後に、初期状態で表示しないタブをスクリプトから非表示にする。
回答ありがとうございます。
ご指摘いただいたように、cssで非表示設定していたことが根本の原因だったようです。
JavaScriptで具体的にどう設定したらよいかも分からい程知識不足でしたが、別の方より助言いただくことができ、無事に解決しました。
本当にありがとうございました。
No.2ベストアンサー
- 回答日時:
●HTMLの<div class="content_wrap disnon">のdisnonを削除。
●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>
【jQuery説明】
概要としては、スクリプトの実行の順序を変えるって感じで。
①まず最初にbxsliderを実行。
②その後にタブの非表示。
disnonを消したので代わりに、.content_wrapの1つ目以外を.hide()で隠す。
③それからタブのスクリプト。
disnon消したし、クラスdisnonにほかの役目がなさそうだったので、
タブの表示非表示を.hide()と.show()に変えましたが、もともとのaddClass,removeClassのままでも良いと思います。
あとセレクタで何度も出てくるものは代入したほうが良いかも。。この程度ならしなくてもほぼ速度変わらないと思いますが。。
※もしこれでうまく行かなかったら、②③はjQueryじゃなくてjsのwindow.onload = function() {}で囲って試してください。あくまで順序のために実行タイミングを変えるだけですけど。
頑張ってください。
回答ありがとうございます。
cssで非表示設定していたことがまず間違っていたのですね。
いただいたアドバイス通り設定しましたら、無事に2つ目以降も表示されました。
どこをどう記入したらいいかも分からなかった為、ご丁寧に説明までしていただき、とても助かりました。
本当にありがとうございます!
Java Scriptに関しては、これからもっと勉強をしていきたいと思います。
アドバイスいただきまして、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
デフォルト非表示にしたい。【t...
-
clear機能を失わずにファイルア...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報