CSSで作ったタブを切り替える

「jquery-1.11.3.min.js」を使用しています。

[サンプル](http://www.pc-weblog.com/sample/tab/)

##js

```qiita.js
$(function() {

    $("#tab li").click(function() {

        var num = $("#tab li").index(this);

        $(".box").addClass('d_none');

        $(".box").eq(num).removeClass('d_none');

        $("#tab li").removeClass('select');

        $(this).addClass('select')

    });

});
```

##html

```qiita.html
<ul id="tab" class="clearfix">
    <li class="tab1 select">タブ1</li>
    <li class="tab2">タブ2</li>
    <li class="tab3">タブ3</li>
    <li class="tab4">タブ4</li>
</ul>
<div class="box">
    <p>タブ1の内容</p>
</div>
<div class="box d_none">
    <p>タブ2の内容</p>
</div>
<div class="box d_none">
    <p>タブ3の内容</p>
</div>
<div class="box d_none">
    <p>タブ4の内容</p>
</div>
```

##css

```qiita.css
#tab,
#tab li {
    margin: 0;
    padding: 0;
}

#tab li {
    position: relative;
    list-style-type: none;
    cursor: pointer;
    float: left;
    width: 25%;
    height: 25px;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#tab li.tab1 {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

#tab li.tab2 {
    background: rgb(59,107,78); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(59,107,78) 0%, rgb(0,109,45) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6b4e', endColorstr='#006d2d',GradientType=0 ); /* IE6-9 */
}

#tab li.tab3 {
    background: rgb(0,183,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(0,183,234) 0%, rgb(0,158,195) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

#tab li.tab4 {
    background: rgb(73,192,240); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,192,240) 0%, rgb(44,175,227) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
}

#tab li:before {
    width: 0;
    height: 0;
    margin-left: -10px;
    padding: 0;
    border: 10px solid transparent;
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
}

#tab li.tab1.select:before {
    border-top: 10px solid #6D0019;
}

#tab li.tab2.select:before {
    border-top: 10px solid #006D2D;
}

#tab li.tab3.select:before {
    border-top: 10px solid #009ED3;
}

#tab li.tab4.select:before {
    border-top: 10px solid #2CAFE3;
}

.box.d_none {
    display: none;
}

.box {
    padding: 10px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: visible;
    zoom: 1;
}
```