現在CSSのみでタブを切り替えるページを作成しております。
商品を紹介するために複数枚の画像に対してSwiperを使用しました。
しかしSwiperが白色のみ反応し、赤色・青色には無反応です。
このページを開くと白色にcheckが入っているので白色のみ反映されて、非表示から表示へタブを切り替えた色に関しては反応していないようです
ざっくりとした内容ですが、
上部に色を選択できるようにタブを作成し、色(タブ)を選ぶと下部に左側:Swiperで商品の画像(5枚程)を、右側:商品スペック(dl dt ddで表記)が表示されるようにflexを使用しページを作成しています。
(各タブの一番下の行(<script>...i1、i2、i3)は消費税を税込表記にするものです。色は最大7色あるページもあります)
<div id="main_wrap"> <div class="tabs"> <input id="i1" type="radio" name="item_tab" checked> <label class="item_tab" for="i1"><img src="白色サムネ.png" alt=""></label> <input id="i2" type="radio" name="item_tab"> <label class="item_tab" for="i2"><img src="赤色サムネ.png" alt=""></label> <input id="i3" type="radio" name="item_tab"> <label class="item_tab" for="i3"><img src="青色サムネ.png" alt=""></label> <div class="item_type" id="i1_content"> <div class="item_top"> <div class="item_photo"> <div class="swiper-container slider"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="白色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-container slider --> <div class="swiper-container thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="白色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> </div><!-- swiper-container --> </div><!-- item_photo --> <dl id="tax"> <div class="item_desc"> <dt>商品名:</dt><dd><h2>〇〇 白</h2></dd> <dt>価格:</dt><dd><p><span>1000</span>円(税込<span></span>円)</p></dd> <dt>サイズ:</dt><dd>直径 10.0cm × 高さ 8.0cm</dd> </div> </dl> </div><!-- item_top --> </div><!-- item_type --> <script>[...i1_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script> <div class="item_type" id="i2_content"> <div class="item_top"> <div class="item_photo"> <div class="swiper-container slider"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="赤色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-container slider --> <div class="swiper-container thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="赤色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> </div><!-- swiper-container thumbs --> </div><!-- item_photo --> <dl id="tax"> <div class="item_desc"> <dt>商品名:</dt><dd><h2>〇〇 赤</h2></dd> <dt>価格:</dt><dd><p><span>1000</span>円(税込<span></span>円)</p></dd> <dt>サイズ:</dt><dd>直径 10.0cm × 高さ 8.0cm</dd> </div> </dl> </div><!-- item_top --> </div><!-- item_type --> <script>[...i2_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script> <div class="item_type" id="i3_content"> <div class="item_top"> <div class="item_photo"> <div class="swiper-container slider"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="青色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-container slider --> <div class="swiper-container thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="青色商品.png" alt=""></div> <div class="swiper-slide"><img src="箱など.png" alt=""></div> </div> </div><!-- swiper-container thumbs --> </div><!-- item_photo --> <dl id="tax"> <div class="item_desc"> <dt>商品名:</dt><dd><h2>〇〇 青</h2></dd> <dt>価格:</dt><dd><p><span>1000</span>円(税込<span></span>円)</p></dd> <dt>サイズ:</dt><dd>直径 10.0cm × 高さ 8.0cm</dd> </div> </dl> </div><!-- item_top --> </div><!-- item_type --> <script>[...i3_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script> </div>
ラジオボタンにcheckが入るとそこの部分が表示され、その他を非表示にするcssにしています。
/*ラジオボタンを全て消す*/ input[name="item_tab"] { display: none; } /*タブ切り替えの中身のスタイル*/ .item_type { display: none; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #i1:checked ~ #i1_content,#i2:checked ~ #i2_content,#i3:checked ~ #i3_content,#i4:checked ~ #i4_content,#i5:checked ~ #i5_content,#i6:checked ~ #i6_content,#i7:checked ~ #i7_content{ display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .item_tab { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
Swiperのサイトよりcssとjsをダウンロードし、<head>内にcssを、</body>の直前にjsを読み込ませており、その1行下にSwiperをどのように動かしたいか<script>を書いています。(参考にしたサイトのscriptをそのまま使用しております)
<script src="../../swiper.js"></script> <script> var mainSlider = new Swiper('.slider', { centeredSlides: true, loop:true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); //サムネイル var Thumbnail = new Swiper('.thumbs', { slidesPerView: 5, loop:true, centeredSlides:true, slideToClickedSlide: true, }); mainSlider.on('slideChange', () => { Thumbnail.slideToLoop(mainSlider.realIndex); }); Thumbnail.on('slideChange', () => { mainSlider.slideToLoop(Thumbnail.realIndex); }); </script> </body>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/27 11:42