导航栏事件委托

最新推荐文章于 2024-07-31 14:35:30 发布

击水三千里。

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量70

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/m0_57424297/article/details/130367846

版权

冒泡允许我们实现最强大的事件处理模式之一，即 事件委托 模式。

如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

通过e.target知道是哪个元素需要运行处理程序

例如：导航栏事件委托，要先清除原有的导航栏样式和对应的页面

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="./index.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="" autocomplete="off">
        <div class="box">
          <div class="tab-nav">
            <a href="javascript:;" class="active" data-id="0">账户登录</a>
            <a href="javascript:;" data-id="1">二维码登录</a>
          </div>
          <div class="tab-pane">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input required type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="dl">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <img class="code" src="./images/code.png" alt="">
          </div>
        </div>
      </form>
    </div>
  </div>

<script>
const tab_nav = document.querySelector('.tab-nav');
    const pane = document.querySelectorAll('.tab-pane');
    //切换导航栏
    tab_nav.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        for (let i = 0; i < pane.length; i++) {
          pane[i].style.display = 'none'
        }
        pane[e.target.dataset.id].style.display = 'block'
      }
    })

</script>

错误记录：未使用querySelectorAll(.tab-pane)，导致不能成功切换页面

击水三千里。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏事件委托

如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。错误记录：未使用querySelectorAll(.tab-pane)，导致不能成功切换页面。例如：导航栏事件委托，要先清除原有的导航栏样式和对应的页面。通过e.target知道是哪个元素需要运行处理程序。冒泡允许我们实现最强大的事件处理模式之一，即。
复制链接

扫一扫