ホーム » ブログ » jqueryでタブを作成するの超簡単な方法
このエントリーをはてなブックマークに追加
@2014/03/24
昔Jquery使ってなかった時代に、WEB開発の際にタブの作成と切り替え全てjavascriptコードで作った。難しくないけど、タブの動きはjsコードで書かなければいけないね。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技术部落_马涛博客へ参考してください。




♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/183.html

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check