2015-11-23

タブパネル＋ smartsticky.jsを使う時の注意点Topics

タブパネルと追従ボックスがあるページをコーディングしていた時に、困ったことが起きました。

追従ボックスに使われていたJSはこれ。

タブパネルJS、最初につかったのはこれです。

HTML

[html]<ul class=”tab”>
<li><a href=”#tab1″>tab1</a></li>
<li><a href=”#tab2″>tab2</a></li>
<li><a href=”#tab3″>tab3</a></li>
<li><a href=”#tab4″>tab4</a></li>
</ul>
<div class=”content”>
<div class=”panel” id=”tab1″>
Tab1<br />Tab1<br />Tab1<br />Tab1<br />
</div>
<div class=”panel” id=”tab2″>
Tab2<br />Tab2<br />Tab2<br />Tab2<br />
</div>
<div class=”panel” id=”tab3″>
Tab3<br />Tab3<br />Tab3<br />Tab3<br />
</div>
<div class=”panel” id=”tab4″>
Tab4<br />Tab4<br />Tab4<br />Tab4<br />
</div>
</div>[/html]

[js]<script type=”text/javascript”>
$(document).ready(function(){
$(‘.panel:first’).show();
$(‘.tab li:first’).addClass(‘active’);
$(‘.tab li’).click(function() {
$(‘.tab li’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.panel’).hide();
$($(this).find(‘a’).attr(‘href’)).fadeIn();
return false;
});
});
</script>[/js]

ここで問題発生。

cssでタブパネル部分を非表示に設定（.panel{display:none}）してしまっていると、
高さを算出できず、追従が効かない。

なので、これに変えてみました。

HTML

[html]<div id=”tab”>
<ul>
<li class=”now”>タブ00</li>
<li>タブ01</li>
<li>タブ02</li>
<li>タブ03</li>
<li>タブ04</li>
</ul>
</div>
<div class=”contents”>ここにタブ00 がアクティブの時に表示する内容</div>
<div class=”contents”>ここにタブ01 がアクティブの時に表示する内容</div>
<div class=”contents”>ここにタブ02 がアクティブの時に表示する内容</div>
<div class=”contents”>ここにタブ03 がアクティブの時に表示する内容</div>
<div class=”contents”>ここにタブ04 がアクティブの時に表示する内容</div>[/html]

[js]$(function (){
$(“.contents:gt(0)”).css(“display”,”none”);
$(“#tab li”).click(function() {
var num = $(“#tab li”).index(this);
$(“#tab li”).removeClass(“now”);
$(this).addClass(“now”);
$(“.contents”).css(“display”,”none”);
$(“.contents”).eq(num).css(“display”,”block”);
});
});[/js]

これでＯＫに。
でもフェードインがないっ！

じゃあ、こっち！

HTML

[html]<ul class=”tabs”>
<li><a href=”#tab1″>タブ1</a></li>
<li><a href=”#tab2″>タブ2</a></li>
<li><a href=”#tab3″>タブ3</a></li>
</ul>

<div class=”tab_content” id=”tab1″>
<img src=”01.jpg” width=”200″ height=”150″ alt=”01″><br>
コンテンツ1
</div>

<div class=”tab_content” id=”tab2″>
<img src=”02.jpg” width=”200″ height=”150″ alt=”02″><br>
コンテンツ2
</div>

<div class=”tab_content” id=”tab3″>
<img src=”03.jpg” width=”200″ height=”150″ alt=”03″><br>
コンテンツ3
</div>[/html]

[js]<script type=”text/javascript”>
$(document).ready(function() {
//初期表示
$(“.tab_content”).hide();//全ての.tab_contentを非表示
$(“ul.tabs li:first”).addClass(“active”).show();//tabs内最初のliに.activeを追加
$(“.tab_content:first”).show();//最初の.tab_contentを表示
//タブクリック時
$(“ul.tabs li”).click(function() {
$(“ul.tabs li”).removeClass(“active”);//.activeを外す
$(this).addClass(“active”);//クリックタブに.activeを追加
$(“.tab_content”).hide();//全ての.tab_contentを非表示
var activeTab = $(this).find(“a”).attr(“href”);//アクティブタブコンテンツ
$(activeTab).fadeIn();//アクティブタブコンテンツをフェードイン
return false;
});
});
</script>[/js]

これで追従も、フェードインもＯＫ！

ムッコ