css实现tab切换

最新推荐文章于 2023-08-08 09:41:16 发布
最新推荐文章于 2023-08-08 09:41:16 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44472722/article/details/106596615
版权

hover实现

<DOCTYPE html>
    <html>
    <head>
        <title>Tab选项卡</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                font-size: 0;
            }
            .box{
                text-align: center;
            }
            .box .tab{
                display: inline-block;
                width: 120px;
                height: 44px;
                padding: 7px;
                border: 1px solid #ccc;
                border-bottom: 0px;
                box-sizing:border-box;
                background: #fff;
                font-size: 16px;
                line-height: 26px;
                color: #555;
                transition: all 0.5s linear;
            }
            .box .tab:hover{
                background: #eee;
                transition: all 0.5s linear;
            }
            .con{
                width: 800px;
                height: 400px;
                margin:0 auto;
            }
            .con .list{
                width: 800px;
                height: 400px;
                border: 1px solid #ccc;
                padding: 10px;
                position: absolute;/*堆一起*/
                z-index: 1;
                box-sizing:border-box;
            }
            .list img{
                height: 300px;
                width: auto;
                margin: 40px auto;
            }
            .box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
            .box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
            .box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
            .box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
            .list:hover{
                z-index: 3;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <a class="tab">哇咔咔</a>
        <a class="tab">太棒了</a>
        <a class="tab">纳尼</a>
        <a class="tab">不要听</a>
        <div class="con">
            <div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></div>
            <div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></div>
            <div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></div>
            <div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></div>
        </div>
    </div>
    </body>
    </html>

点击实现

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3外观漂亮淡入淡出Tab菜单演示</title>

    <style>
        @charset "utf-8";

        body {
            font-family: Cambria, Arial;
            background: #333;
        }

        .tabs {
            width: 100%;
            max-width: 600px;
            border: 1px solid black;
            margin: 50px auto;
        }

        /*input {
    opacity: 1;
}*/

        label {
            cursor: pointer;
            background: yellow;
            color: red;
            border-radius: 5px 5px 0 0;
            padding: 1.5% 3%;
            float: left;
            margin-right: 2px;
            font: italic 1em cambria;
        }

        label:hover {
            background: blue;
        }

        input:checked+label {
            background: palegreen;
            color: blueviolet;
        }

        .tabs input:nth-of-type(1):checked~.panels .panel:first-child,
        .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2),
        .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3),
        .tabs input:nth-of-type(4):checked~.panels .panel:last-child {
            opacity: 1;
            /* -webkit-transition: .9s;*/
        }
        .panels {
            float: left;
            clear: both;
            position: relative;
            width: 100%;
            background: #fff;
            border-radius: 0 10px 10px 10px;
            min-height: 315px;
        }
        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            background: #fff;
            border-radius: 0 10px 10px 10px;
            padding: 4%;
            box-sizing: border-box;
        }
        .panel h2 {
            margin: 0;
            font-family: Arial;
        }
    </style>
</head>
<body>
    <article class="tabs">
        <input checked id="one" name="tabs" type="radio">
        <label for="one">Tab 444</label>
        <input id="two" name="tabs" type="radio" value="Two">
        <label for="two">Tab Two</label>
        <input id="three" name="tabs" type="radio">
        <label for="three">Tab Three</label>
        <input id="four" name="tabs" type="radio">
        <label for="four">Tab Four</label>
        <div class="panels">
            <div class="panel">
                <h2>This is Panel One</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
                    lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
                    vehicula quis a dui.</p>
                <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
                    pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
                <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
                    elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
                    eleifend ac fringilla at, malesuada in eros.</p>
            </div>
            <div class="panel">
                <h2>This is Panel Two</h2>
                <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
                    pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
                <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
                    elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
                    eleifend ac fringilla at, malesuada in eros.</p>
            </div>
            <div class="panel">
                <h2>This is Panel Three</h2>
                <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
                    elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
                    eleifend ac fringilla at, malesuada in eros.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
                    lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
                    vehicula quis a dui.</p>
                <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
                    pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
            </div>
            <div class="panel">
                <h2>This is Panel Four</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
                    lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
                    vehicula quis a dui.</p>
                <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
                    pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
            </div>
        </div>
    </article>
</body>
</html>

有想换工作的同学可以找我内推哦不低于15k（前端，java，测试）

在这里插入图片描述

one.dream
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯干货：css3单边倾斜-异形tab切换的实现方法
Bonjours的专栏
06-13 272
在第一个tab上面，叠加两个背景，一个背景不倾斜，一个背景倾斜，这样就能完美实现效果了。高度要高于其他选项，这样就能遮住下面的内容。其他的选项就直接用transform: skewX(15deg)就可以了。这里主打的就是一个灵活运用，并没有实现难度。
原生js+css实现tab切换功能
10-14
主要为大家详细介绍了原生js+css实现tab切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯CSS实现Tab切换标签效果代码
09-24
主要为大家介绍了纯CSS实现Tab切换标签效果代码,通过css样式设置实现tab标签切换功能,非常简单实用,需要的朋友可以参考下
纯HTML和CSS实现Tab切换效果
03-20
纯HTML和CSS实现Tab切换效果，无需通过Js控制显示和隐藏
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
纯css制作tab选项卡（二）
web_xiaolei的博客
10-12 969
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标点击第二个tab选项，相应内容显示：鼠标划上第三个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html> <html> <head> <title
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
最新发布
lbcbjtlhmjq的博客
08-08 6110
给下图的静态页面添加tab栏切换效果。
纯CSS实现tab栏切换
BambooStrip的博客
09-07 2733
纯CSS实现tab栏切换（input）
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效.rar
07-10
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效，圆角风格，同样带有渐变动画效果，整体风格我觉得相当的漂亮，来自国外CSS3达人网站的作品，代码简洁，TAB效果如示例截图所示。
CSS手动实现-Tabs标签反圆角
qq_41068362的博客
06-26 1557
CSS实现tab反圆角，代替切图方案
CSS实战篇 - tab切换
麦叔
11-15 647
一.效果图 二.代码之风 2.1 html: <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/11/15 Time: 10:32 To change this template use File | Settings | File Templates. --%> <%@ page ...
CSS实现导航条Tab切换的三种方法介绍
09-27
本篇文章主要介绍了CSS实现导航条Tab切换的三种方法，包括布局、hover、label，具有一定的参考价值，有兴趣的可以了解一下。
CSS实现tab页切换效果
杨得朝的博客
11-26 4288
说明 tab也切换在前端页面中是非常常见的一种效果。本人通过搜集资料大致实现有有下面三种写法。 利用:hover选择器 缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果 利用a标签的锚点 + :target选择器 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。 利用label和radio的绑定关系和radio选中时的:checked来实现效果 radio控件和label控件绑定 只要指定label的"for"
css 实现Tab切换
qq_35679291的博客
08-16 510
不废话直接上代码 <!DOCTYPE HTML><!--声明HTML文件--> <html><!--根标签，网页的开始--> <head><!--给浏览器看的信息--> <title>please enter your title</title> <meta charset="utf-8"><!--编码格式为国际编码UTF-8--> <meta
史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼
weixin_34082789的博客
08-06 346
下载地址：http://download.csdn.net/detail/cometwo/9393614 html文件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3外观美丽淡入淡出T...
CSS Tab栏切换
DDAAWW3377的博客
07-30 176
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt...
css3实现tab切换效果
爱折腾的程序员
05-19 3947
程序员用代码交流： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3 tab切换</title> <!--角标--> <link rel="shortcut icon" href="https:...
纯css实现tab切换
weixin_44315394的博客
01-15 489
&lt;div class="tabBox"&gt; &lt;input id="tab1" type="radio" name="tabs" checked&gt; &lt;label for="tab1"&gt;&lt;a&gt;tab1&lt;/a&gt;&am
纯CSS实现Tab切换 以及 CSS+JS实现Tab切换
mixi9760的博客
07-29 2479
纯CSS实现Tab切换 效果图 思路 代码 CSSJS实现Tab切换 效果图 思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 （让所有的子div都重叠在一个地方） 然后全部隐藏 在li的hover 时使其显示代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset=
css实现tab标签切换
05-26
可以使用以下代码实现tab标签切换： HTML代码： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">标签1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">标签2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">标签3</button> </div> <div id="tab1" class="tabcontent"> <p>这是标签1的内容。</p> </div> <div id="tab2" class="tabcontent"> <p>这是标签2的内容。</p> </div> <div id="tab3" class="tabcontent"> <p>这是标签3的内容。</p> </div> ``` CSS代码： ```css .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .tabcontent.show { display: block; } ``` JavaScript代码： ```javascript function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("show"); } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } document.getElementById(tabName).classList.add("show"); evt.currentTarget.classList.add("active"); } ``` 在JavaScript代码中，openTab()函数会根据传入的参数tabName来显示相应的标签页，并将对应的按钮设为激活状态。同时，如果有其他标签页处于激活状态，会将其隐藏并将对应的按钮设为非激活状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值