面向对象 tab栏切换 案例

最新推荐文章于 2022-10-01 20:04:58 发布
最新推荐文章于 2022-10-01 20:04:58 发布
阅读量590 收藏 1
点赞数 1
分类专栏： JS 面向对象 案例 文章标签： js 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49893750/article/details/114994715
版权

在这里插入图片描述

功能：

  1. 点击 tab栏,可以切换效果.
  2. 点击 + 号, 可以添加 tab 项和内容项.
  3. 点击 x 号, 可以删除当前的tab项和内容项.
  4. 双击tab项文字或者内容项文字,可以修改里面的文字内容.

html部分

<body>
    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
最低0.47元/天 解锁文章
吴机智
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
面向对象进行tab栏的切换【史上最全讲解】
weixin_43164078的博客
09-05 1192
利用面向对象函数对tab栏实现增加，删除，修改等操作 1.首先利用html和css对整体进行布局 这里的布局就不过多的解释了直接附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
20前端学习之js高级:面向对象、案例:面向对象的tab栏
浅弋、璃鱼的博客
08-01 548
文章目录一、什么是面向对象:1. 两大编程思想:2. 面向过程编程(POP)3. 面向对象编程(OOP):二、ES6中的类和对象：1. 面向对象的思维特点:2. 对象:3. 类: class4. 创建类:4.1 语法:4.2 类constructor 构造方法:4.3 类中添加方法:4.4 类的继承:4.5 super:5. ES6中类和对象: 一、什么是面向对象: 1. 两大编程思想: 面向过程: 面向对象: 2. 面向过程编程(POP) 面向过程就是分析出解决问题所需要的步骤, 然后用函数把这些步骤
JS面向对象案例（1）-Tab栏切换
m0_53270064的博客
10-01 612
js面向对象综合运用案例 tab栏切换
简单实现Tab菜单的切换功能
weixin_46267824的博客
02-14 2224
做毕设时有点击菜单/导航栏项目然后切换页面内容的需求，记录一下这个小功能 主要思路 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子 建立导航标签/按钮到内容的映射字典，获取点击元素的class属性，在字典中查找对应的内容class属性，然后在展示盒子中显示该内容即可 html代码 <body> <!-- 导航菜单 --> <div class="nav"> <ul> <li cl
ES6面向对象案例-动态添加导航栏标签页
cake_eat的博客
09-24 554
效果图 点击加号+新增选项卡： 双击tab栏更改文字： HTML代码 CSS代码 JS 代码
Vue tab栏切换案例
07-17
vue tab栏切换
面向对象tab栏切换、添加、删除、编辑.mp4
10-28
通过使用ES6中新增的class类实现tab标签栏，标签栏的添加，可以动态的在界面中新增一个标签栏，同时也可以删除tab标签栏,修改tab标签栏，切换tab标签栏。
面向对象tab转换、编辑.rar
10-28
面向对象tab栏切换（先删除所有选项卡操作再设置选中的选项卡）、添加（先创建元素再追加元素到对应的父元素里面）、删除（阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 当删除的不是选中状态的选项的...
JavaScript实现tab栏切换效果
10-15
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS用户中心tab标签切换菜单
10-15
java web用户中心tab标签切换菜单
Tab菜单切换jquery资源
06-20
Tab菜单切换jquery资源
js高级面向对象Tab栏切换案例
sophia
01-04 937
HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
面向对象tab栏切换案例 (有错有错求指教)
m0_59030524的博客
03-20 316
1. 面向对象案例 1.1 功能需求 点击tab栏可以切换效果； 点击+号，可以添加tab项和内容项： 1. 创建新的选项卡 li 和新的内容 section. 2. 把创建的两个元素追加到对应的父元素中. 3. 以前的做法：动态创建元素 createElement，但是元素里面内容较多,需要innerHTML赋 值在 appendChild 追加到父元素里面. 4. 现在高级做法：用 insertAdjacentHTML() ...
js面向对象封装案例----Tab栏切换
qq_25503949的博客
05-08 422
js面向对象封装案例（一）Tab栏切换 一.基本的排版和效果实现： ①.js和html部分： <body> <ul id="header"> <li class="active">节目1</li> <li>节目2</li> </ul> <div id="box1"> <ul> <li>csjab
首页tab切换
让世界更美好！
08-14 1652
前面几个文章说的是后台页面. 这一节我们说的是首页. 即index.html 我们的项目就是仿照网易云音乐(移动端). 打开控制台, 选择如下图: 基本结构 页面的基本结构: &lt;section id="tabs" class="globalTabs"&gt; &lt;ol class="tabs-nav"&gt; &lt;li class="active&qu
【Pink老师es6】JavaScript 面向对象tab栏案例
qq_53385064的博客
05-06 1369
目录 HTML代码： CSS代码： 1、切换功能 2、添加功能 3、删除功能 4、修改功能 整体的JavaScript代码： 利用面向对象对tab栏进行切换功能、添加功能、删除功能和修改功能 HTML代码： <body> <main> <h4> JS 面向对象 动态添加标签 </h4...
使用jQuery实现简单的tab栏标签切换
热门推荐
zhake_的博客
05-02 1万+
强调下没有CSS样式代码 1.页面结构代码 导航菜单 TAB标签 jquery css多级下拉菜单 多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容 各种tab标签选项卡 tab标签页面,ajax载入 ta
切换图片（箭头）
m0_49893750的博客
09-10 1014
<!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> *{ ...
vue实现tab栏切换案例
最新发布
05-26
好的，下面是一个简单的 Vue 实现 tab 栏切换的案例： 1. 在组件中定义数据和方法 ```html <template> <div> <div class="tab"> <div v-for="(item, index) in tabs" :key="index" :class="{ active: currentIndex === index }" @click="changeTab(index)" > {{ item }} </div> </div> <div class="content"> {{ tabsContent[currentIndex] }} </div> </div> </template> <script> export default { data() { return { tabs: ['tab1', 'tab2', 'tab3'], tabsContent: ['content1', 'content2', 'content3'], currentIndex: 0 } }, methods: { changeTab(index) { this.currentIndex = index } } } </script> <style scoped> .tab { display: flex; } .tab > div { padding: 10px; cursor: pointer; } .tab > div.active { background-color: #eee; } .content { padding: 20px; } </style> ``` 2. 在父组件中使用 Tab 组件 ```html <template> <div> <tab></tab> </div> </template> <script> import Tab from './Tab.vue' export default { components: { Tab } } </script> ``` 这里只是一个简单的实现，如果需要更复杂的功能，可以根据实际需求进行扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值