效果图如下：

初始化

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. How To : Modify ASM SYS password using asmcmd 11g R2 and upper

    修改RAC 11gR2及以上版本的ASM的SYS的密码方法 [grid]$ asmcmd ASMCMD> orapwusr --modify --password sys Enter passw ...

  2. 使用 lua 编写 wireshark 协议解析插件

    一.平台 操作系统:windows 7 wireshark:1.10.3 lua:5.1 二.准备 lua 语言基本语法,特别是关于表操作和循环 wireshark 文档,包括用户使用文档和开发者文档 ...

  3. [HZOI 2016]tree—增强版

    [HZOI 2016]tree—增强版 注意事项 为了体现增强版,题目限制和数据范围有所增强: 时间限制:1.5s 内存限制:128MB 对于15% 的数据,1<=N,Q<=1000. 对 ...

  4. RSAROLL

    题目:http://www.shiyanbar.com/ctf/1918 # -*- coding: utf-8 -*- import gmpy2 ciper = [704796792, 752211 ...

  5. noip模拟赛 radius

    分析:这道题实在是不好想,一个可以骗分的想法是假定要求的那个点在中心点上,可以骗得不少分.但是在边上的点要怎么确定呢?理论复杂度O(﹢无穷).答案一定是和端点有关的,涉及到最大值最小,考虑二分最大值, ...

  6. Debug : array type has incomplete element type

    array type has incomplete element type extern   struct  SoundReport SoundList[32];     ///// 多写了  st ...

  7. K - 贪心 基础

    FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse containi ...

  8. 【LeetCode】Longest Substring Without Repeating Characters 解题报告

    [题意] Given a string, find the length of the longest substring without repeating characters. For exam ...

  9. [PWA] Show Notifications when a Service Worker is Installed or Updated

    Service Workers get installed and activated in the background, but until we reload the page they don ...

  10. 虚拟机 开发板 PC机 三者之间不能ping通的各种原因分析

    这个问题事实上也相对照较简单.可是非常多网友都给我发消息说 遇到不能ping,每一个人都得回答一次确实显得心有余而力不足.如今我对遇到这几种问题给出最完整的解决方式. (说实话基本上也仅仅要这几种可能 ...