zoukankan      html  css  js  c++  java
  • 经典 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>
        <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;
        });
    });
  • 相关阅读:

    LayoutInflater
    windows 服务学习
    导入Android项目出现叹号 && invalid project description
    android eclipse 导入工程的问题
    77_Go基础_1_45 空接口
    78_Go基础_1_46 类型断言
    77_Go基础_1_44 接口是一种类型
    74_Go基础_1_41 结构体匿名字段
    76_Go基础_1_43 方法继承
  • 原文地址:https://www.cnblogs.com/xianzuoqiaoqi/p/2472791.html
Copyright © 2011-2022 走看看