效果图如下：

初始化

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;

      width: 100%;

      list-style:none;

      position: fixed;

      top: 0;

      margin: 0;

    }

    .menuItem{

      font-size: 14px;

      text-align: center;

      float: left;

      width: 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>

jQuery 滑动及点击切换效果的更多相关文章

  1. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  2. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  3. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  4. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  6. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  8. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  9. jQuery自动与手动图片切换效果下载

    效果图: 查看效果:http://hovertree.com/jq/hovertreeimg/ 下载:http://hovertree.com/h/bjaf/gk8mko69.htm 使用代码: &l ...

随机推荐

  1. golang实现高阶函数之filter

    package main import "fmt" type student struct{ name string grade int8 } func filter(stu [] ...

  2. discourse论坛迁移

    在源设备的操作备份数据文件tar -czvf discoursefile716.tar.gz /var/discourse然后把此discoursefile716.tar.gz文件传到需要迁移的设备上 ...

  3. python最好用的IDE及查看源码的方法

    一.PyCharm 很多语言都有比较流行的开发工具,比如JAVA 的Eclipse, C#,C++的VisualStudio,最好的Python 开发IDE就是PyCharm 可以直接调试代码,试运行 ...

  4. 00110_Class类

    1.Class 对象是在加载类时由 Java虚拟机以及通过调用类加载器中的 defineClass 方法自动构造的: 2.获取Class对象的三种方式 (1)方式一:通过Object类中的getObj ...

  5. Maven学习总结（3）——使用Maven构建项目

    Maven学习总结(三)--使用Maven构建项目 maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项目的过程. 一.构建Jave项目 1.1.创建J ...

  6. Spring MVC-处理程序映射（Handler Mapping）-简单的Url处理程序映射（Simple Url Handler Mapping）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_simpleurlhandlermapping.htm 说明:示例基于Spring ...

  7. AngularJS：日期转换字符

    JS有很多类库提供日期转换函数,AngularJS也不例外.可以通过$filter来完成转换,方法如下: $filter('date')(sourceDate, "yyyy/MM/dd&qu ...

  8. JAVA模拟登录实例

    近期在做公司一个web项目.要求在我们的系统上,可以显示其它站点上的数据. 刚開始接到这个任务时,还在想.简单的非常.直接用UrlConection直接进入该网页,然后获取该网页的html,取到想要的 ...

  9. NPM 3 Beta为Windows用户带来利好消息

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 近日,np ...

  10. MDA模型定义及扩展

    Tiny框架中.对模型本向没有不论什么强制性约束,也就是说你能够把不论什么类型的对象作为模型.也不必实现不论什么接口. 因此简单的说,你定义一个类.里面有一些描写叙述业务属性或处理的内容,就能够说它是 ...