效果图如下：

初始化

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. 【第8篇】：Python之面向对象

    python之--------封装 一.封装: 补充封装: 封装: 体现在两点: 1.数据的封装(将数据封装到对象中) obj = Foo('宝宝',22) 2.封装方法和属性,将一类操作封装到一个类 ...

  2. hdu 3500 DFS(限定)

    Fling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submi ...

  3. Java基础——基础数据类型与读入输出

    首先我们写完了HelloWorld就学会了java的一种输出 System.out.println() 用起来就像是被强化过的C++的puts函数 或者就是自带endl的cout函数,中间的" ...

  4. Git学习总结（3）——代码托管平台简介

    可以说GitHub的出现完全颠覆了以往大家对代码托管网站的认识.GitHub不但是一个代码托管网站,更是一个程序员的SNS社区.GitHub真正迷人的是它的创新能力与Geek精神,这些都是无法模仿的. ...

  5. 集群管理软件clustershell

    一.简介 1.安装方便.一条指令就能轻松安装. 2.配置方便.很多集群管理软件都需要在所有的服务器上都安装软件,而且还要进行很多的连接操作,clustershell就相当的方便了,仅仅需要所有机器能够 ...

  6. [poj3070]Fibonacci_矩乘_快速幂

    Fibonacci poj-3070 题目大意:求Fibonacci第n项. 注释:模数为10000,$1\le n \le 10^9$. 想法:矩阵题,用例题6的想法,我们构造矩阵 $\begin{ ...

  7. [转]十五天精通WCF——第十四天 一起聊聊FaultException

     我们在玩web编程的时候,可能你会不经意的见到一些http500的错误,我想你应该不会陌生的,原因你应该也知道,服务器异常嘛, 这时候clr会把这个未处理的异常抛给iis并且包装成http500的错 ...

  8. Tomcat类载入器机制（Tomcat源代码解析六）

    要说Tomcat的Classloader机制,我们还得从Bootstrap開始.在BootStrap初始化的时候.调用了org.apache.catalina.startup.Bootstrap#in ...

  9. hook 鼠标键盘消息实例分析

    1.木马控制及通信方法包含:双管道,port重用.反弹技术.Hook技术,今天重点引用介绍一下hook的使用方法,hook信息后能够将结果发送到hacker邮箱等.实现攻击的目的. 转自:http:/ ...

  10. 新随笔（三）什么时候使用button，什么时候使用文字链接

    新随笔(三)什么时候使用button.什么时候使用文字链接 你为什么在这个地方用button而不用文字链接呢? 这是刚才我问一个设计师的问题. 她抬头看我,眼神迷茫.说:"没什么为什么呀,我 ...