html+css+js原生选项卡

已于 2023-09-14 14:03:19 修改
阅读量86 收藏
点赞数
文章标签： html css 前端 javascript
于 2023-09-14 14:00:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46267133/article/details/132874547
版权

1.tab部分可以根据不同标签来改变背景图片或背景色的不同。

示例如下：

话不多说，直接上代码。

<!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-scale=1.0">

    <title>Document</title>

    <style>

        .tab {

            overflow: hidden;

            border: 1px solid #ccc;

        }

        .tab button {

            float: left;

            border: none;

            outline: none;

            cursor: pointer;

            padding: 14px 16px;

        }

        .tabcontent {

            display: none;

            padding: 6px 12px;

            border: 1px solid #ccc;

            border-top: none;

        }

        .tabcontentblock {

            display: block;

        }

        .tablinksactive {

            background: blue;

            color: #ffffff;

        }

        .activeone {

            background: red;

            color: #ffffff;

        }

        .activetwo {

            background: #333;

            color: #ffffff;

        }

        .active {

            background: blue;

            color: #ffffff;

        }

    </style>

</head>

<body>

    <div class="tab">

        <button class="tablinks tablinksactive" οnclick="openTab(event, 'tab1',0)">选项卡1</button>

        <button class="tablinks" οnclick="openTab(event, 'tab2',1)">选项卡2</button>

        <button class="tablinks" οnclick="openTab(event, 'tab3',2)">选项卡3</button>

    </div>

    <div id="tab1" class="tabcontent tabcontentblock">

        <p>这是选项卡1的内容。</p>

    </div>

    <div id="tab2" class="tabcontent">

        <p>这是选项卡2的内容。</p>

    </div>

    <div id="tab3" class="tabcontent">

        <p>这是选项卡3的内容。</p>

    </div>

</body>

<script>

    function openTab(evt, tabName, index) {

        var i, tabcontent, tablinks;

        console.log(tabName)

        tabcontent = document.getElementsByClassName("tabcontent");

        for (i = 0; i < tabcontent.length; i++) {

            tabcontent[i].style.display = "none";

        }

        tablinks = document.getElementsByClassName("tablinks");

        for (i = 0; i < tablinks.length; i++) {

            //判断当前点击的Tab元素下标，替换相对应的Class名

            if (index == 0) {

                tablinks[i].className = tablinks[i].className.replace("tabactive", "");

                tablinks[i].className = tablinks[i].className.replace("active", "");

            } else if (index == 1) {

                tablinks[i].className = tablinks[i].className.replace("active", "");

                tablinks[i].className = tablinks[i].className.replace("activeone", "");

            } else if (index == 2) {

                tablinks[i].className = tablinks[i].className.replace("activeone", "");

                tablinks[i].className = tablinks[i].className.replace("activetwo", "");

            }

        }

        document.getElementById(tabName).style.display = "block"; //展示相对应的元素

        // 判断当前Tab下标，添加相对应的class名称

        if (index == 0) {

            evt.currentTarget.className += " active";

        } else if (index == 1) {

            evt.currentTarget.className += " activeone";

        } else if (index == 2) {

            evt.currentTarget.className += " activetwo";

        }

    }

</script>

</html>

阿呆~~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+CSS3+JS小实例：滚动渐变导航栏
艾恩小灰灰的博客
11-06 801
实例：滚动渐变导航栏。技术栈：HTML+CSS+JavaScript。
js+css实现切换选项卡代码
10-16
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码
qq_54800157的博客
04-20 2070
web前端大作业_Html5+CSS3+JS原生项目_京东商城，模糊查询，京东楼层滚动，京东实现吸顶效果，楼层定位切换，js实现轮播图
【前端基础小案例】HTML+CSS打造精美选项卡菜单效果_选项卡效果html代码
2401_84184567的博客
05-03 303
阅读温馨提示：代码注释前面有 “=========” 标记的即为较之前面修改的代码。
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
qq_44891434的博客
01-29 1万+
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs） 一. HTML 1. 盒子模型 是什么：每个元素被表示为一个矩形的盒子，有四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE
不用js，html+css也能轻松实现tab选项卡
weixin_48211061的博客
11-07 974
很多人做tab选项卡会用到js,通过排他思想去实现选项卡，其实只用css也可以轻松实现。 效果如下 html代码如下 <div class="tab"> <input type="radio" name="tab-one" id="r1" class="hid" checked /> <input type="radio" name="tab-one" id="r2" class="hid" /> <input type="radio"
[前端] html+css+javascript 实现选项卡切换效果
热门推荐
童凌的技术博客
03-28 4万+
用html+css+js实现选项卡切换效果使用之前学过的综合知识，实现一些新闻门户网站上的常见选项卡效果：文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简
HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统模板
qq_365392777
06-17 424
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
html+css+JavaScript实现tab栏切换
weixin_44344709的博客
08-03 710
【代码】使用事件委托实现tab栏切换。
html+css+javascript 开发英语生词本
qq_43186402的博客
08-05 933
基于艾宾浩斯遗忘曲线，用web开发的一款英语生词本app，具有查词（有发音）、添加生词、记忆生词（左划表示认识，右滑表示不认识，长按修改笔记）等功能
HTML+CSS（PC端+移动端）
qq_57003087的博客
06-01 4485
HTML+CSS基础（PC端+移动端）
仿小米商城前端网页，采用html+css+js,纯原生代码实现完美复刻小米商城
08-01
2. **标签选项卡**：通过JavaScript可以实现标签页的切换，当用户点击不同的选项时，对应的內容区域会显示或隐藏。这需要用到DOM遍历、事件处理和CSS类的动态添加与移除。 3. **交互反馈**：例如按钮点击后的加载...
DIV+CSS+JavaScript实现tab切换的选项卡
10-17
通过这个简单的例子，我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
CSS+JS实现的圆角边框TAB选项卡滑动门代码
06-06
在"CSS+JS实现的圆角边框TAB选项卡滑动门代码"实例中，我们将深入探讨以下关键知识点： 1. **CSS圆角边框**：CSS3的`border-radius`属性用于设置元素边框的圆角半径，允许我们创建不同大小的圆角效果。例如，`...
原生js+css实现tab切换功能
10-14
`.tab-menu` 包含了作为选项卡的菜单项，而`.tab-list`则包含对应的每个选项卡内容。每个菜单项被标记为 `.tab-menu-span`，而每个内容区域被标记为 `.tab-list-span`。 CSS部分主要负责样式设置。`.tab-menu` 设置...
Web前端：HTML篇（四）头部head标签与样式表的导入
sjb2274540432的博客
07-24 973
样式表（Stylesheet）是一种用于定义网页内容外观和布局的文件。它通常与HTML文档一起使用，帮助开发者控制网页的视觉效果、排版、以及元素的呈现方式。最常见的样式表语言是CSS（Cascading Style Sheets，层叠样式表）。以下是样式表的一些主要特点和功能：（GPT说的）分离内容和表现：样式表允许将网页的内容（HTML）与其设计（CSS）分开，使得网站的维护和更新更加方便。例如，可以修改样式，而无需改变HTML结构。控制布局和外观。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1091
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2434
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
实现JavaScript 原生选项卡
06-13
好的，下面是一个简单的JavaScript原生选项卡实现： HTML部分： ```html <div class="tab"> <button class="tablinks" 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 id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> </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; } ``` JavaScript部分： ```javascript function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 解释： 通过 HTML 中的按钮元素和对应的内容区域，通过 JavaScript 的事件监听实现点击按钮显示对应的内容区域的功能。其中，openTab 函数接收两个参数，分别是事件对象 evt 和对应的选项卡名称 tabName。在函数内部，通过循环遍历所有内容区域和按钮元素，将它们的样式 display 设为 none，将所有按钮元素的类名中的 active 替换为空格。然后再将对应的内容区域样式 display 设为 block，将对应的按钮元素的类名中加上 active 样式，以示当前选中状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值