纯CSS实现导航栏Tab切换效果

于 2024-03-19 17:43:02 发布
阅读量467 收藏 10
点赞数 3
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w3school52/article/details/136850104
版权

要实现纯CSS的导航栏Tab切换效果，你可以使用CSS中的input元素的checked属性以及相邻选择器（Adjacent Sibling Selector）来实现。以下是一个简单的示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<!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>

/* 隐藏radio按钮 */

.tab-radio {

    display: none;

}

/* 标签样式 */

.tab-label {

    display: inline-block;

    padding: 10px 20px;

    background-color: #eee;

    cursor: pointer;

}

/* 选中标签样式 */

.tab-radio:checked + .tab-label {

    background-color: #ccc;

}

/* 隐藏所有标签内容 */

.tab-content {

    display: none;

}

/* 显示选中标签内容 */

.tab-radio:checked + .tab-label + .tab-content {

    display: block;

}

</style>

</head>

<body>

<input type="radio" name="tab" id="tab1" class="tab-radio" checked>

<label for="tab1" class="tab-label">Tab 1</label>

<div class="tab-content">

    Content for Tab 1

</div>

<input type="radio" name="tab" id="tab2" class="tab-radio">

<label for="tab2" class="tab-label">Tab 2</label>

<div class="tab-content">

    Content for Tab 2

</div>

<input type="radio" name="tab" id="tab3" class="tab-radio">

<label for="tab3" class="tab-label">Tab 3</label>

<div class="tab-content">

    Content for Tab 3

</div>

</body>

</html>

这个示例中使用了input元素的radio类型作为标签的选项，并通过label元素与其关联。然后，利用相邻选择器（Adjacent Sibling Selector）和checked属性来实现切换效果。

纯CSS实现导航栏Tab切换效果 – 菜鸟教程 – 学的不仅是技术，更是梦想！

w3school52
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS网页导航栏样式制作软件
07-09
这个是我本人在网上找了，好久才找的中文CSS样式制作软件，我想对那些，不会做CSS样式导航的朋友，来说绝对是一个好东西。唯一的缺陷就是不能折叠，其它都很不错。
基于JavaScript实现移动端TAB触屏切换效果
12-28
展示效果图如下所示： 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。 HTML 我们准备一个TAB导航#pagenavi，里面包含TAB导航要切换的四个导航按钮，然后是切换的主体内容#slider，这里应该放置四个li与导航按钮对应，内容自定义。 <div class=box-163css> <ul id=pagenavi class=page> <li>
CSS实现导航条Tab切换的三种方法介绍
12-09
前面的话 导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局 【语义布局】 从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;list-style: none;} a{text-decoration: none;color:inherit;}
html 导航菜单切换效果,纯CSS实现导航栏Tab切换效果
weixin_26841743的博客
06-03 3167
。锚点2与之相同对应列表2。接下来，我们就可以使用 :target 接受到点击事件，并操作对应的 DOM 了：CSS Code复制内容到剪贴板"font-family:verdana,geneva;">#content1,#content2{display:none;}#content1:target,#content2:target{display:block;}上面的 CSS 代码，...
html5纯 css tab切换效果,HTML5+CSS3 实现灵动的动画 TAB 切换效果
weixin_32516271的博客
06-03 632
设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。最终实现效果如下：为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒代码分享地址：http://runjs.cn/detail/h2dqt3td实现思路间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。只有 3 个竖线，但是有 4...
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 3803
给下图的静态页面添加tab栏切换效果。
CSS之导航栏
Fancymeng的博客
09-01 1651
今天接着谈谈CSS CSS除了简单的文字背景样式外，还有着多样的格式本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
css实现不同菜单选项卡特效
qq_38982882的博客
02-20 920
用户点击不同菜单选项卡下面高亮的两种动画效果
CSS 导航栏
梁辰兴的博客
09-20 1420
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
HTML+CSS制作导航栏
最新发布
qq_64867440的博客
10-13 2766
1.1效果展示。
jquery css3实现动态选项卡菜单切换效果
06-16
jquery css3实现动态选项卡菜单切换效果
css3实现的tab标签切换效果
01-09
css3实现的tab标签切换效果
html 导航菜单切换效果,纯CSS实现Tab导航栏切换
weixin_29017445的博客
06-03 751
效果：代码：html：列表一内容列表二内容列表一列表二css：.main{position: absolute;left: 50%;top:30%;transform: translate(-50%,-50%);}.tab {margin: 0;padding: 0;overflow: hidden;list-style-type: none;}.tab li {float: left;}.tab...
纯CSS实现tab栏切换，简易轮播图
BambooStrip的博客
09-06 1812
纯CSS，tab栏切换，简易轮播图
使用css 与 js 两种方式实现导航栏吸顶效果
聆听
10-09 389
使用css 与 js 两种方式实现导航栏吸顶效果
简单丝的tab切换栏(html/CSS)
weixin_43811753的博客
10-03 2490
丝滑的tab导航按钮切换
CSS版本的tab切换
w2898的博客
07-06 533
css实现tab切换
css怎么实现tab导航栏的切换
05-10
实现tab导航栏切换的方法有很多，以下是一种常见的实现方式。 1. HTML结构 ```html <div class="tab-nav"> <a href="#" class="active">Tab 1</a> <a href="#">Tab 2</a> <a href="#">Tab 3</a> </div> <div class="tab-content"> <div class="tab-item active">Tab 1 Content</div> <div class="tab-item">Tab 2 Content</div> <div class="tab-item">Tab 3 Content</div> </div> ``` 2. CSS样式 ```css .tab-nav { display: flex; } .tab-nav a { padding: 10px; margin-right: 10px; color: #333; text-decoration: none; border-bottom: 2px solid transparent; } .tab-nav a.active { border-color: #f00; } .tab-content { margin-top: 20px; } .tab-item { display: none; } .tab-item.active { display: block; } ``` 3. JavaScript交互 ```js var navLinks = document.querySelectorAll('.tab-nav a'); var tabItems = document.querySelectorAll('.tab-item'); navLinks.forEach(function(link, index) { link.addEventListener('click', function(event) { event.preventDefault(); // 移除所有链接的 active 类 navLinks.forEach(function(link) { link.classList.remove('active'); }); // 添加当前链接的 active 类 link.classList.add('active'); // 隐藏所有项目 tabItems.forEach(function(item) { item.classList.remove('active'); }); // 显示当前项目 tabItems[index].classList.add('active'); }); }); ``` 以上代码实现了一个简单的tab导航栏切换效果。当点击某个链接时，它会添加一个active类，同时显示与该链接对应的项目，隐藏其他项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值