タブメニュー 横その1

Posted by muchag | jQuery | 2015-02-17 (火) 18:10:40

横並びのタブメニューその1。

【環境】
jQuery:1.11.2
HTML
  1. <div id="tab">
  2. <ul>
  3.     <li>tab_1</li>
  4.     <li>tab_2</li>
  5.     <li>tab_3</li>
  6. </ul>
  7. </div>

 

CSS
  1. #tab ul li {
  2.     float: left;
  3.     height:20px;
  4.     margin:0px 0px 0px 10px;
  5.     padding:5px 15px 5px 15px;
  6.     border:1px solid #ddd;
  7.     color: #999;
  8.     background-color:#ddd;
  9.     cursor:pointer;
  10. }
  11. #tab ul li.selected {
  12.     color: #000;
  13.     background-color:#fff;
  14.     cursor:default;
  15. }

 

jQuery
  1. $( '#tab ul' ).on( 'click', 'li', function() {
  2.     $( 'li.selected' ).removeClass( 'selected' );
  3.     $( this ).addClass( 'selected' );
  4. })
  5.  
  6. $( '#tab ul li' ).first().trigger( 'click' );

 
ソースはほぼ参考サイトからいただいてきた。
 

参考サイト

jQuery 入門:タブメニュー(1)

jQuery | 2015-02-17 (火) 18:10:40 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment