开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css的tab

CSS Tab 基础概念

CSS Tab 是一种使用 CSS 技术实现的页面布局方式，主要用于创建标签页（Tab）界面。通过 CSS 和 HTML 的结合，可以实现点击不同标签页切换显示不同内容的效果。

相关优势

简洁美观：CSS Tab 可以创建简洁、美观的标签页界面，提升用户体验。
响应式设计：CSS Tab 可以轻松实现响应式设计，适应不同屏幕尺寸。
易于维护：CSS Tab 结构清晰，代码量少，便于后期维护和修改。

类型

纯 CSS 实现：通过 CSS 选择器和伪类实现标签页切换效果。
JavaScript 辅助：结合 JavaScript 实现更复杂的标签页功能，如动态加载内容等。

应用场景

网站导航：用于网站的主要导航菜单，方便用户快速切换不同页面。
内容切换：用于展示不同内容模块，如产品详情、用户评价等。
设置页面：用于软件或应用的设置页面，方便用户切换不同设置选项。

示例代码

以下是一个简单的纯 CSS 实现的标签页示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tab</title>
    <style>
        .tab {
            display: flex;
        }
        .tab button {
            background-color: #f1f1f1;
            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.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <button class="tablinks active" onclick="openTab(event, 'Tab1')">Tab 1</button>
        <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
        <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
    </div>

    <div id="Tab1" class="tabcontent active">
        <h3>Tab 1 Content</h3>
        <p>This is the content for Tab 1.</p>
    </div>

    <div id="Tab2" class="tabcontent">
        <h3>Tab 2 Content</h3>
        <p>This is the content for Tab 2.</p>
    </div>

    <div id="Tab3" class="tabcontent">
        <h3>Tab 3 Content</h3>
        <p>This is the content for Tab 3.</p>
    </div>

    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].classList.remove("active");
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove("active");
            }
            document.getElementById(tabName).classList.add("active");
            evt.currentTarget.classList.add("active");
        }
    </script>
</body>
</html>

参考链接

MDN Web Docs - CSS Tab

常见问题及解决方法

标签页切换不生效：
- 确保 JavaScript 函数 openTab 正确绑定到按钮的点击事件。
- 检查 CSS 类名是否正确，特别是 active 类的添加和移除。

内容显示不正确：
- 确保每个标签页的内容块有唯一的 id，并与 JavaScript 函数中的 tabName 参数匹配。
- 检查 CSS 样式是否正确应用，特别是 display 属性的设置。

通过以上示例代码和解决方法，你应该能够实现一个基本的 CSS Tab 功能，并解决常见的切换和显示问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

纯CSS实现tab标签效果

DOCTYPE html> 纯CSS实现tab标签效果...css"> *{margin: 0;padding: 0;} body{text-align: center;}...#box4{background: #ff6600;} .box{width: 500px;height: 500px;color: #fff; } .tab-con..."> 交通运输部办公厅关于征求《港口、修造船厂和船舶污染物接收转运及处置设施建设方案编制指南》（征求意见稿）意见的函为落实《关于深化改革推进出租汽车行业健康发展的指导意见》和《网络预约出租汽车经营服务管理暂行办法》根据

1.1K1 0

HTML+CSS TAB导航栏

这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。...Envelope Heart User css...~.tab { left: 60%; } .wrapper nav #user:checked~.tab { left: 80%; } 实现思路拆分 * { margin: 0....wrapper nav #comment:checked~.tab { left: 20%; } .wrapper nav #envelope:checked~.tab { left...: 40%; } .wrapper nav #heart:checked~.tab { left: 60%; } .wrapper nav #user:checked~.tab {

2091 0

CSS+JS实现tab标签切换

实现tab标签切换比较简单，下面先看看我实现的效果： ?...我主要实现了： 1、tab之间的相互切换； 2、显示选中的tab 下面看看实现代码： css： html,body,div{ font-size: 12px; font-family:"...切换标签 css"> tab"> tab-title tab-title-active" id="tab1" onclick="show(3,1)"... 实现思路：循环将所有的内容标签隐藏，并将tab标题栏的active样式清除，完了之后设置选中标签的内容显示，并给

11.5K3 0

3种纯CSS方式实现Tab 切换

前言 Tab 切换是种很常见的网页呈现形式，不管是PC或者H5都会经常看到，今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式，同时对比一下那种代码更方便，更通俗易懂。 ?...纯CSS实现都面临2个问题： 1、如何接收点击事件？ 2、如何操作相关DOM？...checked 伪类实现纯 CSS Tab 切换拥有 checked 属性的表单元素，或者能够接收到点击事件...知识点: 1、使用 radio 标签的 :checked 伪类，加上实现纯 CSS 捕获点击事情 2、使用了 ~ 选择符对样式进行控制 .container...> target 伪类实现纯 CSS Tab 切换知识点: 1、要使用 :target 伪元素，需要 HTML 锚点，以及锚点对应的 HTML 片段 2、核心是使用 :target

4.7K2 1

一种纯css实现tab切换效果的方案

简介很多场景下不希望用JS污染环境，或者无法直接使用JS，比如markdown中，可以使用css来直接实现tab切换，css实现tab切换有很多伤方法，这里提出一种网上不多见的方案。...[data-tab="0"]) .tabs-tab-content[data-index="0"], .tabs-tabs-wrapper:has(but.tabs-tab-buttonton:focus...[data-tab="0"]) .tabs-tab-content[data-index="0"], .tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab...="1"]) .tabs-tab-content[data-index="1"], .tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="2"...tabs-tab-content[data-index="3"], .tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="4"]) .tabs-tab-content

4291 0

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

8、纯CSS的导航栏Tab切换方案不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： ?...CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。...实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。...如此即达到了 Tab 切换。...但是，这里有个问题我们的 Tab 切换，要点击的是元素，而不是表单元素，所以这里很重要的一点是，使用绑定表单元素。

1.7K2 0

好用的分屏tab react-native-scrollable-tab-view

我们需要导航栏如果一个人每天都有惊喜的话，我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。...1、样式有点搓 2、只能通过点击导航栏tab直接切换 3、分在不同屏的组件（及页面）是一起mount的，而不是切换过去后才mount的特别是因为第三点，我几乎想自己重写一个组件去处理了。...遇见 react-native-scrollable-tab-view 遇见react-native-scrollable-tab-view，是因为我在React Native 中文网学习动画的使用...react-native-scrollable-tab-view 这个组件几乎完全符合了我的预想。...样式好看，且可配置导航tab位置可配页面切换有动画可通过滑动页面实现切换页面是第一次切换获取的时候mount 唯一不太喜欢的是，当导航tab 移至底部的时候，tab的指示线依然实在 tab下方

2.2K0 0

【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

背景介绍日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。...当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。...Tab 栏 css/style.css"> <div class="container"...页面加载：浏览器解析 HTML 文件，加载 CSS 和 JavaScript 文件。页面显示标题栏和 Tab 栏，默认显示 “推荐” 面板，“推荐” Tab 栏链接带有激活样式。 2....用户点击 Tab 栏链接： JavaScript 代码监听 Tab 栏链接的点击事件。根据点击的链接索引，显示相应的面板，并隐藏其他面板。

360 0

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。...CSS 代码 .m { margin: 100px; } .tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px...控制自己的伪元素和下一个同级元素的伪元素，只需要使用 + 选择器即可。其他代码都比较清晰简单，自己分析即可。实现这个效果还是非常简单的，重点是平时的积累，以及各种参数的灵活搭配。...想到实现方法，最终写代码是很快的事情。而且没有什么知识高点在里面。 CSS 之所以难，不是你不会，而是不不会去搭配。...其实，还是只还原了99%的设计效果，两条线一个在背景里面，一个在背景外面，想要把两条分割线都放到背景里面来，应该如何实现呢？可以思考一下。安利一下 scss 。上面的 css 是编译出来的。

4.1K10 0

Tab Switcher 快捷Tab切换器

日常的办公和生活中，经常要用浏览器打开多个 Tab，并不停的来回切换，对于常常习惯打开数十个Tab的人来说，不经意中就浪费掉了海量的毛细时间。...结合本人自己的实践经验，特写了一款专门解决此问题，大幅提高Chrome工作效率的插件，不仅可以快速预览、搜索 Tab，更支持自定义拖拽工作、保存空间，将 Tab 成本降到最小。...点击标题即可切换到目标 Tab弹窗式面板除了嵌入式的全屏面板外，Alt+P(代表Preview) 也可以呼出弹窗式的面板，不占用当前的页面空间，适合 Tab 数量不是太多的场景。...自由布局支持 4 种布局，适合不同的屏幕大小和近视习惯多关键词快捷搜索通过关键词模糊匹配，快速过滤多个目标 Tab，专注于当前的工作内容，而无需迷乱于数十个 Tab 中。...跨窗口拖拽、排序将相关的 Tab 有序放在相邻的地方是良好的习惯，但Chrome自身的Tab排序和切换并不灵活，跨窗口处理更为繁琐。

2.8K1 0

hash定位tab的代码

为什么80%的码农都做不了架构师？...var mytabhash=window.location.hash; var str='#myTabs a[href=\"'+mytabhash+'\"]'; $(str).tab

5824 0

python的tab自动补全

新手学习python，经常要使用python命令行查找一些不熟悉的使用方法等等，但是python命令行下没有自带tab补全的功能，着实让我这新手菜了....不过这好在是个互联网的时代，没有多大的事...vi tab.py #!...readline.write_history_file, histfile) del os, histfile, readline, rlcompleter 代码有了，我们还需要将脚本放到python指定的目录下... /usr/local/lib/python2.7/dist-packages ok，下面我们可以直接导入tab模块，马上体验一下tab补全吧..... >>> import tab >>> sys....__str__( sys.exit( sys.path_hooks 所有的功能都能很直观的看到，如果想了解具体用法，可以使用help命令来自己查看帮助信息

8151 0

空格还是Tab，编程时使用空格比Tab的工资更高

如果你觉得使用空格还是Tab没什么区别，那就大错特错了。或许你从来没有关注过这个问题，但是我要告诉你的是——使用空格比使用Tab键的工资更高。这可不是危言耸听。...研究发现，在控制了国家、接触编程的年数、开发人员类型和语言、教育水平、公司规模等要素后，使用空格键的程序员工资将会比使用tab键的程序员高出8.6％。...在不同的编辑器里tab的长度可能不一致，所以在一个编辑器里用tab设置缩进后，在其它编辑器里看可能缩进就乱了。...这里面的原理是信息量，使用 Tab 缩进的代码中，仍然不可避免的含有空格（运算符之间的间隔，注释等等），但使用空格的代码中根本不含有 Tab，这使得 Tab 缩进代码虽然不压缩的时候更小，但熵更高，因而压缩率较差...说了这么多，使用Tab就没什么好处吗？好处自然是显而易见的，按空格你需要连续按4下才能顶上一个Tab。那么，你平时编程的时候是使用空格还是Tab呢？反正我还是用Tab了，毕竟我不需要那么高的工资。

8173 0

python补全tab

vi python_tab.py #!.../usr/bin/env python import sys import readline import rlcompleter import atexit import os #tab completion...readline.parse_and_bind('tab: complete') histfile=os.path.join(os.environ['HOME'],'.pythonhistory')...readline.write_history_file,histfile) del os,histfile,readline,rlcompleter 将脚本复制到此目录下/usr/lib64/python2.6/ cp python_tab.py.../usr/lib64/python2.6/ 运行python，导入刚刚创建的脚本 python >>> import python_tab

3.1K2 0

Python 中的tab补全

用Python时候没有TAB补全，挺痛苦的，以下是添加方法 1.准备一个Python脚本 cat > tab.py <<EOF #!.../usr/local/bin/python # python tab file import sys import readline import rlcompleter import atexit...import os # tab completion readline.parse_and_bind('tab: complete') # history file histfile = os.path.join...(readline.write_history_file, histfile) del os, histfile, readline, rlcompleter EOF 2.查看Python默认的模块存放位置.../usr/local/lib/python2.7 4.现在可以用了 [root@victor python]# cp tab.py /usr/local/lib/python2.7 [root@victor

7313 0

使用ActionBar实现Tab导航（快速生成Tab样式）

} @Override public void onTabSelected(Tab tab, FragmentTransaction...} }; for (int i = 0; i < 3; i++) { Tab tab = actionBar.newTab();...tab.setText("Tab"+i); tab.setTabListener(tabListener); actionBar.addTab...(tab); } } } 关于Tab Indicator的样式文件，这里介绍一个快速生成网站：http://jgilfelt.github.io/android-actionbarstylegenerator.../ 下载生成的zip文件，然后复制到项目中，在Manifest.xml文件中修改MainActivity的Theme属性为相应的Style name。

1.7K3 0

Notepad++ TAB转为空格或者 “空格转TAB

今天提交代码，老大review后，要求将所有缩进，默认的TAB改为“4个空格”，记录下操作步骤：（1）设置按下图配置即可（“设置” --> "首选项“ --> "语言” -->勾选 “替换为空格”）...（2）即时操作 “Ctrl + A ”选中所有内容，编辑 --> 空白字符操作 --> “空格转TAB” 或者 “TAB转空格”，如下图：

4.1K3 0

python tab补齐

1、编辑一个tab.py文件 root@ubuntu:/lzg/python-learn/s8# cat tab.py #!.../usr/bin/env python import sys import readline import rlcompleter readline.parse_and_bind('tab:complete...') 2、把tab.py这个文件存放到/usr/lib/python2.7/dist-packages/目录 3、这样就可以在任何目录进入python交互器导入import tab后就可以使用tab补齐了

2.1K2 0

简单、通用的JQuery Tab实现

，就可以在tab的标题按钮中设置 onclick="showTabs(1)"来设置第二块内容显示，而其它块隐藏。...CSS，或者 jQuery UI 自带的 CSS，就可以实现滑动门效果。...如果你同时包含了 jQuery UI 的其它插件，那么即使不启用，也会添加一堆的 CSS 定义。...类来处理，并且，自动判断 tabs 和 panels 的对应状态，假如你有4个 tab，但是只有前三个启用了，那么你只需要写三个 panel 就可以，第四个 panel 不存在，则第四个 tab 自动不生效...在实际使用中，会遇到一个问题，一般我们会给 tab 中的文字加链接，那么当鼠标滑过这个 tab 的时候，如果指到了文字，那么激发事件的对象有可能是 A 元素而不是 LI 元素，则事件就不能正确激发。

4.6K5 0

tab group of firefox

大家好，又见面了，我是全栈君。 https://addons.mozilla.org/en-US/firefox/addon/tabgroups-menu/? ...

3.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭