效果图如下：

初始化

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. swift 关键字willSet 和 didSet

    // 下面是苹果给出的解释,就是在给属性设置新值的时候,可以在设置前和设置后做一些处理,这两个关键字就好像对该属性变化的监控 If you don’t need to compute the prop ...

  2. 编译Openwrt的log

    Openwrt配置: Target System (Ralink RT288x/RT3xxx) ---> Subtarget (MT7688 based boards) ---> Targ ...

  3. SGC强制最低128位加密，公钥支持ECC加密算法的SSL证书

      Pro SSL证书,验证企业域名所有权和企业身份信息,采用SGC(服务器门控)技术强制128位以上至256位加密,属于企业OV验证级专业版(Pro) SSL证书:即使用户使用低版本浏览器(比如浏览 ...

  4. SecureCRT的设置和美化

    一  . SecureCRT 7.1  的 安装     http://liufei888.blog.51cto.com/2625545/1306231 1.下载注册机SecureCRT.v.6.7. ...

  5. c语言文件包含

    文件包含是指一个C语言源程序中将另一个C语言源程序包含进来,通过include预处理指令实现. 一般形式: #include”被包含文件名” 或#include<被包含文件名> 2.  作 ...

  6. Unity Update 具体解释

    0x01:简单介绍 Unity的脚本继承了Monobehaviour类,在脚本中定义函数: void FixedUpdate(){} void Update(){} void LateUpdate() ...

  7. Zend_Form 创建、校验和解析表单的基础--（手冊）

    1.  创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...

  8. SAP 金税接口增强 BADI

      SAP与金税连接有两种方式:组件接口及文本接口. 文本接口为例: 1.SAP取发票数据.主要来自合同,销售订单,交货单.发票,客户供应商主数据等 2.SAP处理:合并.拆分,折扣等 3.导出TXT ...

  9. 605B. Lazy Student(codeforces Round 335)

    B. Lazy Student time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  10. WPF中控件TextBlock使用（简单）

    TextBlock主要用来显示文字.比方: <TextBlock Name="txtBlockOutpuMessage"   Text="hello" / ...