読者です 読者をやめる 読者になる 読者になる

CSS3 PIE.htc でタブを。。

CSS3 PIE.htc ってメジャーなんだろうか?

http://css3pie.com/

たまたま、これを使ってるサイトの面倒をみてるのだが、Tab コンテンツを作成する場合に、
もしかしたら、jQuery-UI より簡単に利用できるかも。

Tab のサンプルデザインを、http://css3pie.com/demos/tabs/  から持ってくる。
CSS 長いので、ここでは省略 )

独自のタグ属性 data-pietabid= をタブIDとして、li タグに付与しておく。

<div class="tabBox">
   <ul class="tabs">
      <li data-pietabid="1"><a href="#">Tab One</a></li>
      <li data-pietabid="2"><a href="#">Tab Two</a></li>
      <li data-pietabid="3"><a href="#">Tab Three</a></li>
   </ul>
   <div id="tab-content" class="content">
      <p>chrome ローカルテスト時は、--allow-file-access-from-files を指定で起動</p>
   </div>
</div>

jQuery 前提の JavaScript で以下のようにする。

<script type="text/javascript">
$(function(){
   $('ul[class=tabs]').children().each(function(i, obj){
      $(obj).click(function(){
         if (typeof($(this).attr('class'))=='undefined'){
            $('ul[class=tabs]').children().each(function(j, o){
               $(o).removeAttr('class');
            });
            $(this).attr('class', 'selected');
            // コンテンツを入れ替える。
            switch($(this).data("pietabid")){
               case 1:
                  $('#tab-content').load("sub/one.html");
                  break;
               case 2:
                  $('#tab-content').load("sub/two.html");
                  break;
               case 3:
                  $('#tab-content').load("sub/three.html");
                  break;
               default: break;
            }
         }
      });
   });
   // 初期表示
   $('li[data-pietabid=1]').addClass("selected");
   $('#tab-content').load("sub/one.html");
});
</script>

以下のようになる。。。

f:id:posturan:20160313190354j:plain