2017/01/04
タブメニューの実装
たまにタブメニューを実装させるのですが、毎回何か簡単で扱いやすいのないかなと思ってました。
html
<!-- ▼ tab menu -->
<ul id="tab_menu">
<li class="active">TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
<!-- ▲ tab menu -->
<!-- ▼ tab content -->
<div id="tab_con">
<div class="active">TAB1 CONTENT</div>
<div>TAB2 CONTENT</div>
<div>TAB3 CONTENT</div>
</div>
<!-- ▲ tab content>
CSS
/* tab menu ----------------------------------- */ #tab_menu { list-style: none; } #tab_menu li { display: inline-block; padding-top: 5px; padding-bottom: 5px; padding-left: 25px; padding-right: 25px; background: #EEEEEE; } #tab_menu li.active { background: #CCCCCC; color: #FFFFFF; } #tab_menu li:hover { cursor: pointer; transition: 1.0s; } /* tab content ----------------------------------- */ #tab_con { padding: 25px; background-color: #CCCCCC; } #tab_con div { display: none; } #tab_con div.active { display: block; }
jQuery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script>
$(function(){
$('#tab_menu li').on('click', function(){
if($(this).not('active')){
// タブメニュー
$(this).addClass('active').siblings('li').removeClass('active');
// タブの中身
var index = $('#tab_menu li').index(this);
$('#tab_con div').eq(index).addClass('active').siblings('div').removeClass('active');
}
});
});
</script>