前端jstab栏切换(事件委托+排他思想+自定义属性)

1.利用冒泡,经过li,调用ul,即不给li添加事件,而是给ul添加事件,利用冒泡,经过子盒子,父盒子同样的点击事件将会被触发。(事件委托)

2.如果ul不只有li ,还有p,但是只要li改变样式,需要添加事件对象e

e.target.tagName==="Li"

3.自定义属性data-id="0"   e.target.dataset.id

4.利用all获得数组

5.注意要给a为<a href="javascript:;" class="active" data-id="0">账户登录</a>

tab栏切换代码

<script>
    // 获取导航栏
    const tab_nav = document.querySelector('.tab-nav')
    // 获取切换内容的数组
    const pane = document.querySelectorAll('.tab-pane')
     
    // 事件监听(事件委托,对经过的父盒子进行事件监听,通过冒泡,经过子盒子都会触发父盒子的点击事件)
    tab_nav.addEventListener('click',function(e){
       
      // 通过e.target.tagName === 'A'来限定只有经过a才会触发
      if(e.target.tagName ==='A'){
        // 排他思想(移除类+添加类)
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        // 显示和隐藏步骤,先让所有子盒子都隐藏,再把对应序号的盒子显示
        // 由于前面通过all获得了切换内容的数组,所以通过for来遍历数组,实现所有盒子都隐藏
        for (let i = 0; i <pane.length;i++){
          pane[i].style.display = 'none'
        }
       
        pane[e.target.dataset.id].style.display = 'block'
      }
    })
  </script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jQuery来实现一个简单的tab切换。下面是一个示例代码: HTML: ```html <div class="tab-wrapper"> <ul class="tab-nav"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane">Tab 1 Content</div> <div id="tab2" class="tab-pane">Tab 2 Content</div> <div id="tab3" class="tab-pane">Tab 3 Content</div> </div> </div> ``` CSS: ```css .tab-nav li { display: inline-block; margin-right: 10px; } .tab-nav li a { display: block; padding: 5px; background-color: #eee; border: 1px solid #ccc; text-decoration: none; color: #333; } .tab-nav li.active a { background-color: #fff; border-bottom-color: transparent; } .tab-content .tab-pane { display: none; } .tab-content .active { display: block; } ``` JavaScript: ```javascript $(document).ready(function() { $('.tab-nav li:first-child').addClass('active'); $('.tab-content .tab-pane:first-child').addClass('active'); $('.tab-nav li a').click(function() { var tab_id = $(this).attr('href'); $('.tab-nav li').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $(this).parent().addClass('active'); $(tab_id).addClass('active'); return false; }); }); ``` 首先,给每个tab页一个唯一的id,然后使用CSS来设置样式。JavaScript代码中,我们给第一个tab页和tab导航的第一个选项添加active类。然后,当点击tab导航的某一项时,我们首先移除所有的active类,然后给被点击的导航项和对应的tab页添加active类。最后,返回false以阻止默认链接行为。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值