经典 Tab 实现（人人CSS）

收集一个经典Tab样式，不用图片，简约，简单

1.CSS

 

.tabview {
    *zoom: 1;
    height: 23px;
    border-bottom: 1px solid #D6DAE4;
    _overflow: hidden;
}
.tabview a
{
    cursor:pointer;
    text-decoration: none;
}
.tabview .title {
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    height: 17px;
    padding: 3px 0;
    float: left;
    _display: inline;
    margin-right: 20px;
    margin: 0;
}
.tabview .title .icon {
    vertical-align: text-bottom;
}
.tabview .tabview-tabs {
    height: 24px;
    overflow: hidden;
    zoom: 1;
    _position: relative;
}
.tabview .tabview-tabs .a-tab {
    float: left;
    zoom: 1;
    height: 15px;
    line-height: 15px;
    padding: 5px 19px 4px;
}
.tabview .tabview-tabs .a-tab:hover {
    text-decoration: none;
}
.tabview .tabview-tabs .selected {
    color: #333;
    border-width: 1px 1px 0;
    border-style: solid solid none;
    border-color: #D6DAE4;
    font-weight: bold;
    padding: 4px 18px 4px;
    background-color: #FFF;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    outline: 0 none;
}

.tabview-align-right .tabview-tabs {
    padding-right: 10px;
}
.tabview-align-right .tabview-tabs .a-tab {
    float: right;
}
.tabview .tabview-options {
    float: right;
}

 

HTML:

 

 <div class="tabview tabview-align-right ">
    <h3 class="title">
    相册
    </h3>
    <div class="tabview-tabs">
    <a  onclick="return false;" class="a-tab selected">好友的最新照片</a>
    <a  onclick="return false;" class="a-tab ">我的相册</a>
    <a onclick="return false;" class="a-tab">圈有我的照片</a>
</div>

JS:

 

$(".tabview-tabs a").each(function (i) {
    $(this).click(function () {
        $(".tabview-tabs a").removeClass("selected");
        $(this).addClass("selected");
        return false;
    });
});