jqueryでタブを作成するの超簡単な方法_ブログ_zanmai.net

昔Jquery使ってなかった時代に、WEB開発の際にタブの作成と切り替え全てjavascriptコードで作った。難しくないけど、タブの動きはｊｓコードで書かなければいけないね。Jqueryを使えば結構簡単で作れる。
Jqueryをわかる方は下記のコード見ればすぐに作れると思う。
タブ表示するのHTMLコード：

<div id="myTabs">
  <ul style="height: 30px;" >
   <li ><a href="#tab-1">tab-1</a></li>
   <li class=""><a href="#tab-2">tab-2</a></li>
  </ul>
  <div id="tab-1">
  内容1
  </div>
  <div id="tab-2" style="display: table;"> 
  内容2    
  </div>
 </div>

タブを切り替えるJqueryコード：

<script>
  $(function() {
    $( "#myTabs" ).tabs();
  });
</script>

それだけ？！
ソウ、ソレダケ！

本記事の中国語版を参考したい方は、姉妹サイトweb技术部落_马涛博客へ参考してください。