JavaScript用面向对象的方法实现tab栏的切换

最新推荐文章于 2024-07-22 09:52:49 发布
最新推荐文章于 2024-07-22 09:52:49 发布
阅读量1.3k 收藏 2
点赞数 3
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forever__fish/article/details/121662930
版权
本文介绍了如何使用面向对象的思想来实现Tab栏的切换功能，包括增删改查四大操作。通过创建Tab类，实现切换、添加、删除和修改Tab栏及其内容的方法。在切换功能中，利用排他思想确保高亮和内容的正确切换；添加功能允许动态创建新的Tab；删除功能考虑了用户体验，合理处理高亮转移；修改功能则通过双击触发文本框编辑。文章还提醒读者注意代码中可能存在的小bug，提供了一段示例代码供学习者参考。
摘要由CSDN通过智能技术生成

hello，友友们，今天鱼小包同学主要实现的功能是tab栏的切换，相信有一定基础的友友一定知道面向对象这个思想，那么今天就让我们一起去探索用这个思想实现tab栏的切换吧！let's go！

tab栏切换的主要功能：

  • 增删改查四大功能
  • 点击某一个tab栏，此tab栏高亮并对应的内容显示
  • 动态添加tab栏及内容
  • 点击删除某一个tab栏，此tab栏消失并内容跟着消失，高光改变
  • 双击某一tab栏，可以修改此tab栏的标题和内容

以上就是想要实现的功能啦，有些友友看了之后是不是有些熟悉呢，哈哈，不要开心的太早，一些些小小的bug隐藏在其中，冲鸭！

首先展示一下html代码，一些基本的结构：

 

 部分css样式在这里就不加以展示啦，相信友友们都会写呢，初学者想要学习的话欢迎私聊鱼小包同学哦~

以下将是本文的重点，友友们要认真看哦。想要用面向对象的思想实现这项功能，首先我们需要新建一个类，把公共的属性和方法抽取出来写进去，然后根据我们的类去实例化对象，再对应去创建一个个对象就可以了。<

最低0.47元/天 解锁文章
Baobao小包
关注
JavaScript面向对象简单Tab切换-
weixin_46323591的博客
01-09 196
** 废话不说，看代码 ** html代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab栏特效</title> <style> * { margin: 0; padding: 0 } li { list-style: none } a { text-decoration: none }
js面向对象实现Tab切换
weixin_45791806的博客
05-28 179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input {
(十四)原生js案例之面向对象的tab切换
最新发布
峰会路转的博客
07-22 365
当用 new 关键字创建对象的时候，会执行构造函数中的代码，这个 this 指向的是新创建的对象，所以可以给对象添加属性。用对象的思想去写代码，就是面向对象。
js面向对象运用 tab栏切换
qq_43194919的博客
07-30 360
可添加，删除tab栏，可对tab栏的标题和内容双击进行修改 html代码： <body> <div class="tabsbox" id="tab"> <!-- tab标签 --> <nav class="firstnav"> <ul> <li class="liactive"><span>测试1</span>&lt
JS面向对象案例（1）-Tab栏切换
m0_53270064的博客
10-01 664
js面向对象综合运用案例 tab栏切换
面向对象 tab切换
weixin_33981932的博客
03-06 70
<style> *{ margin:0; padding:0; } ul{ list-style:none; overflow:hidden; } ul li{ width:100px; height:40px; border:1px solid black; f...
案例：面向对象-实现tab栏切换（选项卡）
Yous的博客
07-22 888
当我们删除的不是选中状态的li的时候，原来的选中状态li保持不变，阻止事件冒泡可能已经实现了。因为没添加切换的点击事件，如何添加呢？事实上，除了切换，其它未写的功能在后续也需要能够实现。在前面的updateNode()中已经添加了删除，所以初始化中不用另外再添加。4双击tab项文字或内容项文字可以修改里面的文字内容。此时可以添加选项卡了，但新添加的选项卡根本就不能点击。3点击x号，可以删除当前的tab项和内容项。2点击+号，可以添加tab项和内容项。1点击tab栏，可以实现切换。...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
01-08
在本篇《ES6学习笔记（三）：教你用js面向对象思维来实现tab栏增删改查功能》中，作者深入探讨了如何利用JavaScript的ES6特性，特别是面向对象编程，来构建一个具备增、删、改、查功能的tab栏组件。以下是详细的知识...
面向对象tab转换、编辑.rar
10-28
面向对象tab栏切换（先删除所有选项卡操作再设置选中的选项卡）、添加（先创建元素再追加元素到对应的父元素里面）、删除（阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 当删除的不是选中状态的选项的...
js基于面向对象实现网页TAB选项卡菜单效果代码
10-23
本文主要介绍如何使用JavaScript面向对象编程技术实现网页上的TAB选项卡菜单效果。通过面向对象的方法，我们能够更好地组织代码结构，使代码更加模块化、易于维护和扩展。同时，代码示例将展示如何通过鼠标滑过...
JavaScript面向对象版tab 栏切换
weixin_46261309的博客
02-02 746
功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字可以修改里面的文字内容 index.html文件 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link
面向对象案例tab切换
lsy__lsy的博客
05-06 240
html代码实现 <div class="tabsbox" id="tab"> <nav class="firstnav"> <ul> <li class="liactive"> <span>测试1</span> <span class="close">-</span> </li> <li> <span>..
JavaScript 面向对象TAB栏切换
weixin_43681578的博客
03-08 608
一、功能要求： 1、点击 tab 栏，可以切换效果. 2、点击 + 号，可以添加 tab 项和内容项. 3、点击 x 号，可以删除当前的 tab 项和内容项. 4、双击tab项文字或者内容项文字，可以修改里面的文字内容. 二、代码实现 代码每一步都有注解，在此就不一一赘述。 1. 结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
js高级—tab栏切换（面向对象做法）
黑白两客
03-21 591
<main> <h4> Js 面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> <!-- tab 标签 --> <nav class="fisrstnav"...
JS高级——面向对象方式解决tab栏切换问题
weixin_30414155的博客
01-28 179
注意事项 1、给li元素注册事件，函数里面的this指的li元素，那么我们可以在注册事件之前将Tab对象用that=this进行保存 2、使用沙箱模式，所以暴露给外面的变量使用的是window.tab，将window作为参数传递进去 <!DOCTYPE html> <html lang="en"> <head> <meta char...
JavaScript学习笔记—面向对象版tab栏切换
weixin_45655555的博客
02-29 558
JavaScript学习笔记—面向对象版tab栏切换 功能需求： 点击tab栏，可以切换效果。 点击 + 号，可以添加tab项和内容项。 点击 x 号，可以删除当前的tab项和内容项。 双击tab项文字或者内容项文字，可以修改里面的文字内容。 抽象对象：Tab对象 该对象具有切换功能 该对象具有添加功能 该对象具有删除功能 该对象具有修改功能 步骤一： 步骤二：添加功能 点击 + 可以实...
面向对象tab切换
weixin_49405038的博客
02-20 109
<style type="text/css"> * { margin: 0; padding: 0; list-style: none; /* css实现禁止文字选中: */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/.
js面向对象的写法实现Tab切换
hfdxmz_3的博客
05-29 279
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { .
JavaScript运用事件委托实现tab栏切换
12-08
以下是JavaScript运用事件委托实现tab栏切换的示例代码： HTML代码： ```html <div class="tab"> <button class="tablinks" data-tab="tab1">Tab 1</button> <button class="tablinks" data-tab="tab2">Tab 2</button> <button class="tablinks" data-tab="tab3">Tab 3</button> </div> <div class="tabcontent" id="tab1">Tab 1 content</div> <div class="tabcontent" id="tab2">Tab 2 content</div> <div class="tabcontent" id="tab3">Tab 3 content</div> ``` JavaScript代码： ```javascript // 获取所有tab按钮 const tabBtns = document.querySelectorAll('.tablinks'); // 获取所有tab内容 const tabContents = document.querySelectorAll('.tabcontent'); // 为tab按钮添加点击事件 document.querySelector('.tab').addEventListener('click', function(event) { // 如果点击的是tab按钮 if (event.target.classList.contains('tablinks')) { // 遍历所有tab按钮 for (let i = 0; i < tabBtns.length; i++) { // 移除所有tab按钮的active类名 tabBtns[i].classList.remove('active'); // 隐藏所有tab内容 tabContents[i].style.display = 'none'; } // 给当前点击的tab按钮添加active类名 event.target.classList.add('active'); // 显示当前点击的tab内容 document.getElementById(event.target.dataset.tab).style.display = 'block'; } }); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值