用事件委托实现tab栏切换

最新推荐文章于 2024-02-11 21:42:52 发布
最新推荐文章于 2024-02-11 21:42:52 发布
阅读量527 收藏 1
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyilong11/article/details/127764893
版权

用事件委托实现tab栏切换-JS

代码

<!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>tab栏切换</title>
  <style>
    * {
   
      margin: 0;
      padding: 0;
    }

    .tab {
   
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
   
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
   
      font-size: 24px;
      font
最低0.47元/天 解锁文章
不知名的呆小毛
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
选项卡事件委托demo
01-09
主要是委托事件的demo
JavaScript实现tab栏切换效果
10-15
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端jstab栏切换（事件委托+排他思想+自定义属性）
2301_80142734的博客
10-31 361
1.利用冒泡，经过li，调用ul,即不给li添加事件，而是给ul添加事件，利用冒泡，经过子盒子，父盒子同样的点击事件将会被触发。3.自定义属性data-id="0" e.target.dataset.id。2.如果ul不只有li ,还有p，但是只要li改变样式，需要添加事件对象e。5.注意要给a为
编程，实现tab标签的切换。（事件委托）
qq_58517459的博客
03-12 234
实现tab标签的切换
JS事件委派与tab栏切换问题
呆萌小新@渊洁的博客
07-02 526
js中的事件委派: 基本概念 事件委派：将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象 ，使用它对触发事件的元素进行判断。 事件委派无法解决tab栏切换问题,必须使用for循环给子类注册事件!因为我们在选中子类时,程序无法确认选的时哪个子类 实例解说: 1.传统方式 <div class="
全选文本框案例（重点）、 事件委托版 Tab 栏切换、 页面滚动显示隐藏侧边栏、仿京东固定导航栏案例、实现bilibili 点击小滑块移动效果、电梯导航案例——综合案例（重点）——DOM事件
weixin_70320000的博客
02-23 520
全选文本框案例（重点）、 事件委托版 Tab 栏切换、 页面滚动显示隐藏侧边栏、仿京东固定导航栏案例、实现bilibili 点击小滑块移动效果、电梯导航案例——综合案例（重点）——DOM事件
事件委托-tab切换
程序猿007的博客
06-19 1261
HTML结构代码： 首页 关于 我的 联系 div1 div2 div3 div4 CSS样式代码： *{ margin: 0;padding: 0; } ul li{ list-style: none; float: left; padding: 10px 45px; ba
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
在项目开发中遇到这样需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，实现方法其实很简单的，下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能，需要...
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
jquery+css实现Tab栏切换的代码实例
11-29
前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。 最终要实现的效果图如下： （1）点击tab栏显示...
js实现tab栏切换效果
10-15
主要为大家详细介绍了js实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS | 通过委派事件的多个Table之间的切换
m0_72383454的博客
08-26 528
之前我们用【排他思想】做了一个Tab切换的小案例，那么如果我们的需要不只是只有一个table呢？我们应该怎么做？今天我们就来看一下。
js_采用事件委托方式实现tab栏切换
最新发布
weixin_46811890的博客
02-11 991
在弹性盒子中，设置子元素之间的间距为均匀分布*//* 将元素的布局方式设置为弹性盒子（Flexbox），使子元素可以灵活地排列和调整大小。// dataset属性是一个属性对象，专门用来访问和操作HTML元素上的自定义数据属性。// dataset属性返回的是字符串，需要进行相应的类型转换。// e.target.tagName 获取被点击标签名。/* 设置子元素沿着主轴的结束位置对齐 */// 采用事件委托方式实现tab栏切换。
事件委托方式做标签选项卡
ETO_cyber的博客
04-02 377
技巧：在循环标签伪数组时，给标签加上自定义mark属性以便于获取点击对象的顺序从而操作别的同序标签组。
Tab栏切换案例（DOM操作）
qq_64182180的博客
11-22 781
标签栏在网站中的使用非常广泛，他的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换。
使用事件委托写选项卡效果
weixin_52683504的博客
02-03 245
使用事件委托写选项卡效果
WPF TabControl切换TabItem时没有SelectionChanging
weixin_52475977的博客
06-15 2322
问题：WPF TabControl切换TabItem时没有SelectionChanging事件 解决方案：可以用TabItem的PreviewMouseLeftButtonDown事件代替 XAML中： .cs中：
对话框处理TAB按键事件的三种方法
Mr.Out的专栏
04-14 1418
对话框（Dialog）分为模态对话框和非模态对话框（Modeless Dialog）。非模态对话框不能处理TAB键、快捷键等按键事件，也就是说用户不能在非模态对话框中通过按TAB键切换各控件之间的焦点（Focus）。但这也不是没有解决办法的。方法一在MSDN中，让非模态对话框处理TAB按键事件的经典代码如下：HINSTANCE hinst;HWND hwndMain;HWND hw
事件委托Tab栏切换
m0_71088505的博客
01-08 414
【代码】事件委托Tab栏切换。
运用事件委托实现tab栏切换
12-08
以下是使用事件委托实现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 id="tab1" class="tabcontent">Tab 1 Content</div> <div id="tab2" class="tabcontent">Tab 2 Content</div> <div id="tab3" class="tabcontent">Tab 3 Content</div> ``` CSS代码： ```css .tabcontent { display: none; } ``` JavaScript代码： ```javascript // 获取所有的tab按钮 var tabBtns = document.querySelectorAll('.tablinks'); // 获取所有的tab内容 var tabContents = document.querySelectorAll('.tabcontent'); // 为tab按钮添加点击事件监听器 document.querySelector('.tab').addEventListener('click', function(ev) { // 如果点击的是tab按钮 if (ev.target.classList.contains('tablinks')) { // 遍历所有的tab按钮 for (var i = 0; i < tabBtns.length; i++) { // 如果当前按钮是被点击的按钮 if (tabBtns[i] === ev.target) { // 添加active类名 tabBtns[i].classList.add('active'); // 显示对应的tab内容 document.getElementById(tabBtns[i].dataset.tab).style.display = 'block'; } else { // 移除active类名 tabBtns[i].classList.remove('active'); // 隐藏对应的tab内容 document.getElementById(tabBtns[i].dataset.tab).style.display = 'none'; } } } }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值