原生js、jQuery实现选项卡功能

在大家在网上平常浏览网页的时候，想必各位都会看到选项卡功能，在这里给大家详解一下用原生js、jQuery如何来写一些基本的选项卡

话不多说，先给各位看一下功能图：

             　　　　

好了，下边开始写代码了：

HTML代码：

<ul>
    <li class="click">red</li>
    <li>blue</li>
    <li>yellow</li>
</ul>
<div class="box">
    <div class="show"></div>
    <div></div>
    <div></div>
</div>

CSS代码:

*{
    margin: 0;
    padding: 0;
}
ul{
    overflow: hidden;
    /*注意父级元素塌陷，详情见博客*/
}
ul li{
    width: 100px;
    height: 30px;
    float: left;
    border: 1px solid #000;
    list-style: none;
    border-right: none;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
ul li:last-child{
    border-right: 1px solid #000000;
}
.box{
    position: relative;
}
.box div{
    width: 304px;
    height: 300px;
    position: absolute;
    display: none;
}
.box div:first-child{
    background-color: red;
}
.box div:nth-child(2){
    background-color: blue;
}
.box div:last-child{
    background-color: yellow;
}
.box .show{
    display: block;
}
.box .hide{
    display: none;
}
.click{
    background-color: #ccc;
}

基本样式的设置