tab control

タブ切り替え。 特定要素内のn番目の要素を指定。

by J. Jones

HTML

<div class="tabs">
    <ul class="tab_nav">
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3</li>
    </ul>
    <div class="tab_content">content 1</div>
    <div class="tab_content">content 2</div>
    <div class="tab_content">content 3</div>
</div>

<div class="tabs">
    <ul class="tab_nav">
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3</li>
    </ul>
    <div class="tab_content">content 1</div>
    <div class="tab_content">content 2</div>
    <div class="tab_content">content 3</div>
</div>

CSS

/* reset */
html, body {
    height: 100%;
    font-size: 10px;
    font-family: Verdana, Geneva, sans-serif;
}

/* html tag */
a {
    color: #F00;
}
a:hover {
    text-decoration: none;
}
h1 {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
}

/* style */
ul {
    margin: 0;
    list-style-type: none;
}
li {
    float: left;
    margin: 0 5px 5px;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #000;
}
li.now {
    color: #FFF;
    background: #000;
}
div {
    clear: both;
    margin: 0;
}
.tab_content {
    border: 1px solid #000;
    margin: 0 5px 20px 0;
    padding: 10px;
}

JavaScript

$(function () {
    $('.tab_content').css('display', 'none');
    $('.tab_nav + .tab_content').css('display', 'block');
    var btn = $('.tab_nav li');
    $(btn + ':first-child').addClass('now');    
    btn.click(function (){
        var index = $('li',$(this).parent()).index(this),
            box   = $('.tab_content',$(this).closest(".tabs"));
        $($(this).siblings()).removeClass('now');
        $(this).addClass('now');
        box.hide();
        box.eq(index).show();
    });
});