タブメニュー 横その１
横並びのタブメニューその１。
【環境】
jQuery:1.11.2
jQuery:1.11.2
HTML
- <div id="tab">
- <ul>
- <li>tab_1</li>
- <li>tab_2</li>
- <li>tab_3</li>
- </ul>
- </div>
CSS
- #tab ul li {
- float: left;
- height:20px;
- margin:0px 0px 0px 10px;
- padding:5px 15px 5px 15px;
- border:1px solid #ddd;
- color: #999;
- background-color:#ddd;
- cursor:pointer;
- }
- #tab ul li.selected {
- color: #000;
- background-color:#fff;
- cursor:default;
- }
jQuery
- $( '#tab ul' ).on( 'click', 'li', function() {
- $( 'li.selected' ).removeClass( 'selected' );
- $( this ).addClass( 'selected' );
- })
- $( '#tab ul li' ).first().trigger( 'click' );
ソースはほぼ参考サイトからいただいてきた。
参考サイト
jQuery 入門：タブメニュー(1)