Q&A###前提・実現したいこと
slick.jsのスライダーを内包したタブメニューを作成しています。
レスポンシブで、各タブの要素の高さが可変するのですが、
①タブの切り替えに合わせてコンテンツの高さを取得したいです。
また上下にタブを設置しているので、
②上下のタブのactiveクラスを連動させたいです。
→②は解決できました。
どなたか分かる方がいらっしゃいましたら、ご教授よろしくお願いします。
###発生している問題・エラーメッセージ
①タブを切り替えても、最初に表示されているタブコンテンツの高さが保持されてしまう。
②色々試したものの、結局できませんでした。orz
→②は解決できました。
###該当のソースコード
HTML
1<div class="standardMenu"> 2 <ul id="tabMenu" class="cf"> 3 <li><a class="tabActive" href="#page01">tab01</a></li> 4 <li><a href="#page02">tab02</a></li> 5 <li><a href="#page03">tab03</a></li> 6 <li><a href="#page04">tab04</a></li> 7 </ul> 8</div> 9 10<div id="tabContent"> 11 <div id="page01" class="mainBodyBox tabBox"><!--★コンテンツ01--> 12 <h4>ここはtab01コンテンツです。</h4> 13 <h5 id="page01_1">小見出し小見出し小見出し小見出し</h5> 14 <div class="contentsSlider"> 15 <div class="contentsSlider_slide slide_01"> 16 <div><img src="images/dummy01.jpg" /></div> 17 <div><img src="images/dummy02.jpg" /></div> 18 <div><img src="images/dummy03.jpg" /></div> 19 <div><img src="images/dummy04.jpg" /></div> 20 </div> 21 <div class="contentsSlider_thum thum_01"> 22 <div><img src="images/dummy01.jpg" /></div> 23 <div><img src="images/dummy02.jpg" /></div> 24 <div><img src="images/dummy03.jpg" /></div> 25 <div><img src="images/dummy04.jpg" /></div> 26 </div> 27 </div> 28 <p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p> 29 </div> 30 <div id="page02" class="mainBodyBox tabBox"><!--★コンテンツ02--> 31 <h4>ここはtab02コンテンツです。</h4> 32 <h5 id="page02_1">小見出し小見出し小見出し小見出し</h5> 33 <div class="contentsSlider"> 34 <div class="contentsSlider_slide slide_02"> 35 <div><img src="images/dummy01.jpg" /></div> 36 <div><img src="images/dummy02.jpg" /></div> 37 <div><img src="images/dummy03.jpg" /></div> 38 <div><img src="images/dummy04.jpg" /></div> 39 </div> 40 <div class="contentsSlider_thum thum_02"> 41 <div><img src="images/dummy01.jpg" /></div> 42 <div><img src="images/dummy02.jpg" /></div> 43 <div><img src="images/dummy03.jpg" /></div> 44 <div><img src="images/dummy04.jpg" /></div> 45 </div> 46 </div> 47 <p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p> 48 <h5 id="page02_2">小見出し小見出し小見出し小見出し</h5> 49 <div class="contentsSlider"> 50 <div class="contentsSlider_slide slide_03"> 51 <div><img src="images/dummy01.jpg" /></div> 52 <div><img src="images/dummy02.jpg" /></div> 53 <div><img src="images/dummy03.jpg" /></div> 54 <div><img src="images/dummy04.jpg" /></div> 55 </div> 56 <div class="contentsSlider_thum thum_03"> 57 <div><img src="images/dummy01.jpg" /></div> 58 <div><img src="images/dummy02.jpg" /></div> 59 <div><img src="images/dummy03.jpg" /></div> 60 <div><img src="images/dummy04.jpg" /></div> 61 </div> 62 </div> 63 <p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p> 64 </div> 65 </div> 66 <!--以下、★コンテンツ03、★コンテンツ04が続く。（それぞれ複数のslickスライダーを内包し、要素の高さが違う。）--> 67</div><!--/#tabContent--> 68 69<div id="tabMenu_bottom" class="standardMenu"> 70 <ul id="tabMenu" class="cf"> 71 <li><a class="tabActive" href="#page01">tab01</a></li> 72 <li><a href="#page02">tab02</a></li> 73 <li><a href="#page03">tab03</a></li> 74 <li><a href="#page04">tab04</a></li> 75 </ul> 76</div> 77
javascript
1//タブ 2$(function(){ 3 $(window).on('load resize', function(){ 4 5 var w = window.innerWidth ? window.innerWidth: $(window).width(); 6 var x = 767; 7 var tabContent_01 = $("#tabContent #page01").outerHeight(); 8 var tabContent_02 = $("#tabContent #page02").outerHeight(); 9 var tabContent_03 = $("#tabContent #page03").outerHeight(); 10 var tabContent_04 = $("#tabContent #page04").outerHeight(); 11 var tabContent = $("#tabContent .tabBox:visible").outerHeight(); 12 13 if (w <= x) {//ウィンドウサイズが767px以下の場合（SP） 14 $("#tabContent #page01").css("height", tabContent_01); 15 $("#tabContent #page02").css("height", tabContent_02); 16 $("#tabContent #page03").css("height", tabContent_03); 17 $("#tabContent #page04").css("height", tabContent_04); 18 $("#tabContent").css("height", tabContent);//■1 19 20 $(function() { 21 $('#tabMenu li a').on('click',function(){ 22 $("#tabMenu li a").removeClass("tabActive"); 23 $(this).addClass("tabActive"); 24 $(".tabBox").css("visibility", "hidden");//■2 25 $(".tabBox").css("height", "0px"); 26 $($(this).attr("href")).css("visibility", "visible"); 27 $($(this).attr("href")).css("height", "auto"); 28 $("#tabContent").css("height", tabContent);//■3 29 return false; 30 }); 31 }) 32 } 33 }); 34}); 35 36//スライダーslick.js 37$('.slide_01').slick({ 38 slidesToShow: 1, 39 slidesToScroll: 1, 40 arrows: false, 41 fade: true, 42 asNavFor: '.thum_01' 43}); 44$('.thum_01').slick({ 45 slidesToShow: 4, 46 slidesToScroll: 1, 47 dots: false, 48 focusOnSelect: true, 49 asNavFor: '.slide_01' 50}); 51//以下、スライダーが複数続きます。
CSS
1/*タブ*/ 2#tabMenu { position: relative; width: 100%; overflow: hidden; height: 40px;} 3#tabMenu li { position: absolute; bottom: 0; float: left; width: 25%;} 4#tabMenu li a { display: block; height: 30px; color: #fff; font-size: 11px; text-align: center; line-height: 30px; background-color: rgba(153,119,38,0.5); border-right: 1px solid #fff;} 5#tabMenu li:last-child a { border-right: none;} 6#tabMenu li:first-child { left: 0;} 7#tabMenu li:nth-child(2) { left: 25%;} 8#tabMenu li:nth-child(3) { right: 25%;} 9#tabMenu li:last-child { right: 0;} 10#tabMenu li .tabActive { height: 40px; color: #997726; line-height: 40px; background-color: #fff; border: 1px solid #997726; border-right: 1px solid #997726 !important; border-bottom: none;} 11#tabMenu_bottom ul { height: 30px;} 12#tabMenu_bottom ul li { height: 30px;} 13#tabMenu_bottom ul li a { height: 30px;} 14#tabMenu_bottom ul li .tabActive { height: 30px; line-height: 30px; border: 1px solid #997726; border-bottom: 1px solid #997726 !important;} 15/*tabContent*/ 16#tabContent { position: relative; width: 100%;} 17#tabContent .tabBox { position: absolute; top: 0; width: 100%;} 18
###試したこと
タブコンテンツの中にスライダーが入っているので、
通常のhideやdisplay:noneでのタブが実装できない。
（そうするとタブを切り替えた時にスライダーが表示されない）
なので、なんとかスライダーの高さを維持したまま、visibilityで処理している。（■2）
■1で#tabContentの初期の高さを取得しているのを、
■3で切り替わったコンテンツの高さに合わせて高さを更新したいつもり。
が、まったく動いていないのでずっと初期の高さが保持されてしまっている状態です。
activeクラスの上下タブ連動に関しては手付かずの状態です。
→上下タブ連動は解決できました。
回答2件
0
自己解決
自力でできましたーーーー！！やったー！！！
javascript
1$(function(){ 2 $(window).on('load resize', function(){ 3 //var w = $(window).width(); 4 var w = window.innerWidth ? window.innerWidth: $(window).width(); 5 var x = 767; 6 var tabContent_01 = $("#tabContent #page01").outerHeight(); 7 var tabContent_02 = $("#tabContent #page02").outerHeight(); 8 var tabContent_03 = $("#tabContent #page03").outerHeight(); 9 var tabContent_04 = $("#tabContent #page04").outerHeight(); 10 var tabContent = $("#tabContent .tabBox:visible").outerHeight(); 11 12 if (w <= x) {//ウィンドウサイズが767px以下の場合（SP） 13 $("#tabContent #page01").css("height", tabContent_01); 14 $("#tabContent #page02").css("height", tabContent_02); 15 $("#tabContent #page03").css("height", tabContent_03); 16 $("#tabContent #page04").css("height", tabContent_04); 17 $("#tabContent").css("height", tabContent); 18 19 $(function() { 20 $('#tabMenu li a').on('click',function(){ 21 var tab_index = $('#tabMenu li a').index(this); 22 $("#tabMenu li a").removeClass("tabActive" 23 $('#tabMenu_bottom #tabMenu li a').removeClass("tabActive"); 24 $(this).addClass("tabActive"); 25 $('#tabMenu_bottom #tabMenu li a').eq(tab_index).addClass("tabActive"); 26 $(".tabBox").css("visibility", "hidden"); 27 $(".tabBox").css("height", "0px"); 28 //ここでdisplayとheightで高さを確定させてみた。 29 $($(this).attr("href")).css({"visibility": "visible", "display": "block", "height": "auto"}); 30 31 //ここでvisibleなコンテンツの高さを取得してみました。 32 var visiblecontent = $($(this).attr("href")).outerHeight(); 33 //それを#tabContentに代入。 34 $("#tabContent").css("height", visiblecontent); 35 36 return false; 37 }); 38 $('#tabMenu_bottom #tabMenu li a').on('click',function(){ 39 var tab_index02 = $('#tabMenu_bottom #tabMenu li a').index(this); 40 $("#tabMenu li a").removeClass("tabActive"); 41 $('.standardMenu #tabMenu li a').removeClass("tabActive"); 42 $(this).addClass("tabActive"); 43 $('.standardMenu #tabMenu li a').eq(tab_index02).addClass("tabActive"); 44 }); 45 }) 46 } 47 }); 48}); 49
上下タブのactiveクラスの連動といい、
もっとスマートでコンパクトな書き方はあるんだろうけれど、
とりあえず動いたのでヨシとします！
五輪ピックで日本人選手がメダルを取ったのを観戦している時と同じくらい、うれしいです！
やったぜ！！
投稿2016/08/08 13:56
総合スコア45
0
上下のタブ連動はなんとか実装できました。
本当はもっとコンパクトに書けるはずなんだけれどわからないので、
上下タブで別にそれぞれスクリプトを書いて対応。
長ったらしいけど、ちゃんと動くのでとりあえずよし。
javascript
1$(function() { 2 $('#tabMenu li a').on('click',function(){ 3 var tab_index = $('#tabMenu li a').index(this); 4 5 $("#tabMenu li a").removeClass("tabActive"); 6 $('#tabMenu_bottom #tabMenu li a').removeClass("tabActive"); 7 $(this).addClass("tabActive"); 8 $('#tabMenu_bottom #tabMenu li a').eq(tab_index).addClass("tabActive"); 9 $(".tabBox").css("visibility", "hidden"); 10 $(".tabBox").css("height", "0px"); 11 $($(this).attr("href")).css({ 12 "visibility": "visible", 13 "height": tabContent//★高さが取得できぬ。 14 }); 15 return false; 16 }); 17 $('#tabMenu_bottom #tabMenu li a').on('click',function(){ 18 var tab_index02 = $('#tabMenu_bottom #tabMenu li a').index(this); 19 $("#tabMenu li a").removeClass("tabActive"); 20 $('.standardMenu #tabMenu li a').removeClass("tabActive"); 21 $(this).addClass("tabActive"); 22 $('.standardMenu #tabMenu li a').eq(tab_index02).addClass("tabActive"); 23 }); 24}) 25
投稿2016/08/08 06:01
総合スコア45
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。