纯css 实现tab效果

最新推荐文章于 2023-10-03 15:35:56 发布
最新推荐文章于 2023-10-03 15:35:56 发布
阅读量1.7k 收藏
点赞数
文章标签： css

原理：
1、radio 与a 重叠，
2、radio zindex属性比a大，
3、radio透明
参考 http://www.imooc.com/video/7144

<html>
<head>
    <style type="text/css">
        .nav {
            position: fixed;
            bottom: 10px;
            width: 100%;
            height: 50px;
        }

        input, a {
            position: absolute;
            width: 20%;
            height: 100%;
        }

        input {
            z-index: 100;
            opacity: 0;
        }

        a {
            text-decoration:none;
            text-align: center;
            background: yellow;
            line-height: 50px;
        }

        .nav_item1, .nav_item1 + a {
            left: 0%;
        }

        .nav_item2, .nav_item2 + a {
            left: 20%;
        }

        .nav_item3, .nav_item3 + a {
            left: 40%;
        }

        .nav_item4, .nav_item4 + a {
            left: 60%;
        }

        .nav input:checked + a {
            background-color: #ff0000;
            font-size: 26px;
        }
    </style>

</head>
<body>
<div class="nav">
    <input type="radio" name="nav_radio" checked="checked" class="nav_item1">
    <a href="#">aa</a>
    <input type="radio" name="nav_radio" class="nav_item2">
    <a href="#">bb</a>
    <input type="radio" name="nav_radio" class="nav_item3">
    <a href="#">cc</a>
    <input type="radio" name="nav_radio" class="nav_item4">
    <a href="#">dd</a>
</div>
</body>
</html>
<html>
<head>
    <style type="text/css">
        .nav {
            position: relative;
        }

        .nav-item {
            display: inline-block;
            width: 20%;
            height: 50px;
            margin-left: 10px;
            position: relative;
        }

        input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            z-index: 100;
            height: 100%;
            opacity: 0;
        }

        a {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            background: yellow;
            line-height: 50px
        }

        .nav input:checked + a {
            background-color: #ff0000;
            font-size: 26px;
        }
    </style>

</head>
<body>
<div class="nav">
    <div class="nav-item">
        <input type="radio" name="nav_radio" checked="checked">
        <a href="#">aa</a>
    </div>
    <div class="nav-item">
        <input type="radio" name="nav_radio">
        <a href="#">aa</a>
    </div>
    <div class="nav-item">
        <input type="radio" name="nav_radio">
        <a href="#">aa</a>
    </div>
    <div class="nav-item">
        <input type="radio" name="nav_radio">
        <a href="#">aa</a>
    </div>
</div>
</body>
</html>

html简单，css就要复杂点，
html 复杂，css就能简单点，
html 简单至上，后台人员只要看html，当然结构简单更好，

心鑫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 783
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
纯干货：css3单边倾斜-异形tab切换的实现方法
最新发布
Bonjours的专栏
06-13 253
在第一个tab上面，叠加两个背景，一个背景不倾斜，一个背景倾斜，这样就能完美实现效果了。高度要高于其他选项，这样就能遮住下面的内容。其他的选项就直接用transform: skewX(15deg)就可以了。这里主打的就是一个灵活运用，并没有实现难度。
CSS & 滚动容器与固定 Tabbar 自适应的几种方式
cookcyq__的博客
08-29 424
其实，header 不用 fixied 也能达到吸顶效果，其原理是，给容器定高 + overflow 实现自己的滚动容器，但如果使用了错误的单位，比如本文一开始说的。这类动态计算 px 的单位在 IE9 前是不支持的，这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。即保留了原生滚动（不用设置 overflow），也实现了自适应，解决了底部留白的问题。而导致的，下面我将会介绍如何使用其它方案来解决。本文就到这里，若有问题或其它更好的方案欢迎指出。
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 6001
给下图的静态页面添加tab栏切换效果。
tab选项卡实现的4种方式
weixin_68014318的博客
08-02 487
tab栏选项卡，jquery实现tab栏选项卡
CSS盒子模型、表格标签（table）、表单标签（form）
shouhouxiaomuwu的专栏
05-13 1268
CSS盒子模型、表格标签（table）、表单标签（form）
纯CSS实现Tab切换标签效果代码
09-24
纯CSS实现的Tab切换标签效果是一种常见的网页交互设计，它允许用户在多个内容板块之间进行切换，而无需JavaScript等脚本语言。这种效果通常用于显示有限的、相关的、可切换的内容区域，例如产品介绍、服务详情或者...
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
纯HTML和CSS实现Tab切换效果
03-20
CSS主要用于样式化Tab按钮和内容区域，以及实现点击按钮时的内容切换效果。我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感，同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的...
JS+CSS实现滑动切换tab菜单效果
10-23
主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
简单丝的tab切换栏(html/CSS)
weixin_43811753的博客
10-03 2984
丝滑的tab导航按钮切换
【css实现自定义tab标签切换样式】微信小程序篇
chensi_07的博客
01-06 2306
项目需求： 切换tab选项卡改变边框及圆角样式： 实现思路： （1）先给内容部分添加边框和下边框左右圆角： border: 2px solid #00DCD5; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; （2）给选中的tab标签添加样式.active; （3）tab标签切换的时候，根据索引判断第一个tab添加右边圆角，最后一个tab添加左边圆角，中间部分添加两边圆角 <view class="tabs-c
教你两招用纯CSS写Tab切换
weixin_34212189的博客
05-30 314
说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的，是使用 0 行JS代码来实现Tab切换！ 具体效果如下： Tab切换 方法一：模拟单选框原理 关于模拟单选框，在我之前文章中有讲到，详情请戳→纯CSS模拟单选框和复选框...
CSS手动实现-Tabs标签反圆角
qq_41068362的博客
06-26 1521
CSS实现tab反圆角，代替切图方案
css实现tab切换
前端劝退工程师
06-07 1541
hover实现 <DOCTYPE html> <html> <head> <title>Tab选项卡</title> <meta charset="utf-8"> <style type="text/css"> body{ font-size: 0; } .b
CSS实现tab页切换效果
杨得朝的博客
11-26 4288
说明 tab也切换在前端页面中是非常常见的一种效果。本人通过搜集资料大致实现有有下面三种写法。 利用:hover选择器 缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果 利用a标签的锚点 + :target选择器 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。 利用label和radio的绑定关系和radio选中时的:checked来实现效果 radio控件和label控件绑定 只要指定label的"for"
css3实现tab切换效果
爱折腾的程序员
05-19 3945
程序员用代码交流： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3 tab切换</title> <!--角标--> <link rel="shortcut icon" href="https:...
纯css实现tab切换
极速博客
02-15 7388
前端开发中，经常会用到tab切换，最常用的做法是使用JS处理显示与隐藏，然而在H5开发中， 完全可以做到利用CSS3的伪类选择器实现这个效果，遗憾的是在IE8及以下，不可用。 先看整体效果： html结构：                                     tab1                             t
纯CSS实现赛车Loader动画效果
"该文档详细介绍了如何使用纯CSS技术实现一个赛车加载动画效果。通过创建DOM结构、设置样式以及利用伪元素，逐步构建出赛车及其动态旋转的车轮。" 在实现这个纯CSS赛车Loader动画时，首先要创建基本的HTML结构。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值