zoukankan      html  css  js  c++  java
  • jQuery 滑动及点击切换效果

    效果图如下:

    初始化

    hover效果:滑动menuitem,‘首页’不变,字体颜色改变,有下划线展示。

    即在动态添加boder-bottom,改变字体颜色颜色

    .menuItem:hover{
          border-bottom: 2px solid #108ee9;
          color: #108ee9;
     }

    click效果:点击其他menuitem,‘首页’样式清除,且字体颜色改变,有下划线展示。

    即点击menuitem,利用事件委托,动态添加itemSelected,且移除相邻兄弟属性itemSelected

     $('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected')

    完整代码如下: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        body,html{
          margin: 0;
          padding: 0;
        }
        .wrap{
    
        }
        .menu{
          background: black;
          height: 60px;
           100%;
          list-style:none;
          position: fixed;
          top: 0;
          margin: 0;
        }
        .menuItem{
          font-size: 14px;
          text-align: center;
          float: left;
           90px;
          color: white;
          line-height: 60px;
          margin-top: -1px
        }
        .itemSelected{
          border-bottom: 2px solid #108ee9;
          color: #108ee9;
        }
        .menuItem:hover{
          border-bottom: 2px solid #108ee9;
          color: #108ee9;
        }
        .clearfix:after{
          display: block;
          content: '';
          clear: both;
        }
      </style>
    </head>
    <body>
    <div class="wrap">
      <ul class="menu clearfix"  >
        <li class="itemSelected menuItem" >首页</li>
        <li class="menuItem" >自驾导航</li>
        <li class="menuItem" >共享出行</li>
        <li class="menuItem" >公共出行</li>
        <li class="menuItem" >信息服务</li>
        <li class="menuItem" >相关下载</li>
      </ul>
      <div class="content">
    
      </div>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>

    //采用事件委托进行绑定 $('.menu').on('click',function (event) { // 判断标签是否li if (event.target.tagName === 'LI') { $tar =$(event.target) //获取子元素index var index = $tar.parent().children().index($tar); $('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected') } }) </script> </body> </html>
  • 相关阅读:
    前端接收后端返回数据中【后端返回数据
    JavaSE 文件部分常用功能示例
    springboot controller路径名设置
    springboot 文档学习记录
    controller 方法路径、参数的使用
    Vue制作音乐播放器_基于网易云音乐的接口
    Java复习_枚举
    Java复习_static用例_单例模式_懒汉式
    c++和python中的sort
    通过portainer来管理容器和镜像
  • 原文地址:https://www.cnblogs.com/renzm0318/p/10979484.html
Copyright © 2011-2022 走看看