jQueryタブ切り替え

• Jul 4, 2014
• Tags: jquery, tips

jQueryタブ切り替え。
簡単に実装できます。

jQuery

<script src="js/jquery-2.x.x.min.js"></script>
<script>
$(function() {
 $('.tab li').click(function() {
 var index = $('.tab li').index(this);
 $('.content').css('display','none');
 $('.content').eq(index).css('display','block');
 $('.tab li').removeClass('select');
 $(this).addClass('select')
 });
});
</script>

HTML

<ul class="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<div class="content">
<p>タブ1内容</p>
</div>
<div class="content hide">
<p>タブ2内容</p>
</div>
<div class="content hide">
<p>タブ3内容</p>
</div>
<div class="content hide">
<p>タブ4内容</p>
</div>

CSS

.tab {
 overflow:hidden;
}

.tab li {
 background:#ccc;
 cursor:pointer;
 float:left;
 margin-right:1px;
 padding:5px 25px;
}

.tab li.select {
 background:#eee;
}

.content {
 background:#eee;
 padding:20px;
}

.hide {
 display:none;
}