实例解析关于兔鲜登录tab栏切换案例详细讲解！

最新推荐文章于 2024-03-29 14:06:57 发布

阿猫的故乡

最新推荐文章于 2024-03-29 14:06:57 发布

阅读量489

点赞数 9

分类专栏：前端 JavaScript webAPL 文章标签：人工智能

本文链接：https://blog.csdn.net/weixin_70007095/article/details/134850233

版权

前端同时被 3 个专栏收录

48 篇文章 3 订阅

订阅专栏

JavaScript

45 篇文章 6 订阅

订阅专栏

webAPL

20 篇文章 0 订阅

订阅专栏

文章目录

效果图展示

点击账户登录显示登录的模块，点击二维码登录显示二维码的模块

整体制作的一个思路

点击哪个模块哪个显示，另外一个模块让它隐藏即可！

代码展示


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<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>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>

  <script>
    const tab_nav=document.querySelector(".tab-nav")
    const tab_pane=document.querySelectorAll(".tab-pane")
    tab_nav.addEventListener("click",function(e){
      if(e.target.tagName==='A'){
        document.querySelector(".active").classList.remove("active")
        e.target.classList.add("active")



        for(let i =0;i<tab_pane.length;i++){
          tab_pane[i].style.display='none'
        }

        tab_pane[e.target.dataset.id].style.display='block'

        console.log(id);
      }
    })


       (function(){
        const form = document.querySelector("form")
        const remember=document.querySelector(".remember")
        const name_username=document.querySelector("[name=username]")
        form.addEventListener("submit",function(e){
          e.preventDefault();
          if(!remember.checked){
            return alert("请先勾选框!")
          }
            localStorage.setItem("user-xia",name_username.value)
            location.href=`./index.html`
        })
        
       }())

        const li1=document.querySelector(".xtx_navs li:first-child")
        const li2=li1.nextElementSibling
        function raed(){
          const user_xia=localStorage.getItem("user-xia")
          if(user_xia){
            li1.innerHTML=`
            
            <a href="javascript:;"><i class="iconfont icon-user"> ${user_xia}</i></a>
            `

            li2.innerHTML=`<a href="javascript:;">退出登录</a>`
          }else{

            li1.innerHTML=`
            
            <a href="./login.html">请先登录</a>
            `

            li2.innerHTML=`
            <a href="javascript:;">免费注册</a>
            `
          }
        }
        raed()
  </script>
  <style>
    /* *{
      display: block;
    } */
  </style>
</body>

</html>

是整个页面的代码（有需要图片素材请联系我！！）

技术细节

e.target.tagName==='A' （判断点击是不是a标签）

document.querySelector(".active").classList.remove("active")（删除类）
e.target.classList.add("active")（让我点击那个标签添加类）

小结

此这篇关于JavaScript实现Tab栏切换功能详解的文章就介绍到这了,更多相关JS Tab栏切换

阿猫的故乡

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
实例解析关于兔鲜登录tab栏切换案例详细讲解！

document.querySelector(".active").classList.remove("active")（删除类）此这篇关于JavaScript实现Tab栏切换功能详解的文章就介绍到这了,更多相关JS Tab栏切换。e.target.classList.add("active")（让我点击那个标签添加类）e.target.tagName==='A' （判断点击是不是a标签）点击哪个模块哪个显示，另外一个模块让它隐藏即可！是整个页面的代码（有需要图片素材请联系我！显示登录的模块，点击。
复制链接

扫一扫