效果图如下：

初始化

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. python 简单爬取今日头条热点新闻(一)

    今日头条如今在自媒体领域算是比较强大的存在,今天就带大家利用python爬去今日头条的热点新闻,理论上是可以做到无限爬取的: 在浏览器中打开今日头条的链接,选中左侧的热点,在浏览器开发者模式netwo ...

  2. (蓝桥)2017C/C++A组第七题正则问题

    #include<iostream> #include<memory.h> #include<stack> #include<string> using ...

  3. 基于Python3.7和opencv的人脸识别（含数据收集，模型训练）

    前言 第一次写博客,有点紧张和兴奋.废话不多说,直接进入正题.如果你渴望使你的电脑能够进行人脸识别:如果你不想了解什么c++.底层算法:如果你也不想买什么树莓派,安装什么几个G的opencv:如果你和 ...

  4. 常用Git命令大全思维导图

    开发中代码管理少不了使用Git,对于初学者来说Git命令的学习是一个难过的坎,为了帮助大家记忆并快速掌握Git的基本使用,我把常用的Git命令整理成思维导图,分享给大家. 高清大图在线预览 http: ...

  5. fzu 2129

    第i个元素a未出现过:dp[i] = (2 * dp[i-1] + 1) % mod; visit[a]代表a最后出现的位置 第i个元素a出现过:dp[i] = (2 * dp[i-1] - dp[v ...

  6. 【ACM】NYOJ_288_Time_20130725

    Time时间限制:1000 ms  |  内存限制:65535 KB 难度:2描述 Digital clock use 4 digits to express time, each digit is ...

  7. LucaCanali --DTRACE AND SYSTEMTAP 脚本工具

    https://github.com/LucaCanali http://cern.ch/canali/

  8. 跨平台C++开源码的两种经常使用编译方式

    作者:朱金灿 来源:http://blog.csdn.net/clever101 跨平台C++开源代码为适应各种编译器的编译,採用了两种方式方面来适配.一种是makefile方式.以著名的空间数据格式 ...

  9. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...

  10. 苹果的编程语言--Swift

    今天(2014-6-3)凌晨WWDC2014揭幕了,带来了新语言Swift,据说非常牛逼...所以就找了几个不错的link跟大家分享. 1.Swift的简单介绍,主要介绍了Swift的简单而经常使用的 ...