Rumah > Artikel > hujung hadapan web > 介绍一个纯css制作tab的实例代码

介绍一个纯css制作tab的实例代码

零下一度asal: 2017-05-05 15:42:051378semak imbas

使用radio单选按钮可以制作tab效果，有几个标签页，就需要对应添加几个input，同时每个input的name必须设置为一致，使用CSS3的同级元素链接符来改变样式。而Tab里面的nav导航都要用label包裹并添加对应的for.
ps：tab不支持IE8及其以下，box 布局IE 6.0-11.0不支持可float浮动替代

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>DEMO3</title>

<style type="text/css">
/*
    tab头区域
*/
.ui-tab input {
    display: none
}
/*
    内容区域
*/
.ui-tab .ui-content ul {
    display: none;
    min-height: 200px;
}
/*
    头部区域选中
*/
#new:checked ~ .ui-nav .new,
#hot:checked ~ .ui-nav .hot,
#video:checked ~ .ui-nav .video {
    background: #F4BD00;
}
/*
    内容区域选中
*/
#new:checked ~ .ui-content .new-list,
#hot:checked ~ .ui-content .hot-list,
#video:checked  ~ .ui-content .video-list {
    display: block;
    background: #f6f6f6;
}

/*
    tab头部布局
*/
.ui-nav ul {
    display: -webkit-box;
    display: box;
    height: 45px;
    line-height: 45px;
    background: #fff;
}
.ui-nav ul > li {
    -webkit-box-flex: 1;
    box-flex: 1;
    text-align: center;
}
.ui-nav ul > li label {
    width: 100%;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
    <!--  -->
    <p class="ui-tab">
        <input type="radio" name="ui-tab" id="new" checked="checked" /> 
        <input type="radio" name="ui-tab" id="hot" /> 
        <input type="radio" name="ui-tab" id="video" />
        <p class="ui-nav">
            <ul>
                <li class="new"><label for="new">最新新闻</label></li>
                <li class="hot"><label for="hot">社会焦点</label></li>
                <li class="video"><label for="video">最新视频</label></li>
            </ul>
        </p>
        <p class="ui-content">
            <ul class="new-list">
                <li>tab内容新1</li>
            </ul>
            <ul class="hot-list">
                <li>tab内容新2…</li>
            </ul>
            <ul class="video-list">
                <li>tab内容新3…</li>
            </ul>
        </p>
    </p>
    <!--  -->
</body>
</html>

效果：

介绍一个纯css制作tab的实例代码

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

Atas ialah kandungan terperinci 介绍一个纯css制作tab的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：详解CSS3 :not()伪类选择符的用法实例Artikel seterusnya：必须掌握的CSS文字样式

Artikel berkaitan

Lihat lagi