1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Title</title>
  7.   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.  
  14.     ul,
  15.     li {
  16.  
  17.       list-style: none;
  18.     }
  19.  
  20.     body {
  21.       background: #f6f6f6;
  22.     }
  23.  
  24.     .active {
  25.       background: red;
  26.     }
  27.  
  28.     #box li {
  29.       display: none;
  30.     }
  31.  
  32.     #ul {
  33.       background: #fff;
  34.     }
  35.  
  36.     #ul li {
  37.       float: left;
  38.       width: 200px;
  39.     }
  40.  
  41.     #ul li img {
  42.       width: 60px;
  43.       padding: 10px;
  44.     }
  45.  
  46.     #ul:after {
  47.       content: "020";
  48.       display: block;
  49.       height: 0;
  50.       clear: both;
  51.       visibility: hidden;
  52.     }
  53.   </style>
  54. </head>
  55.  
  56. <body>
  57.   <ul id="ul">
  58.     <li id="n1" class="active"><img src="data:image/n1_hover.png"></li>
  59.     <li id="n2"><img src="data:image/n2.png"></li>
  60.     <li id="n3"><img src="data:image/n3.png"></li>
  61.   </ul>
  62.   <ul id="box">
  63.     <li style="display: block">111</li>
  64.     <li>222</li>
  65.     <li>333</li>
  66.   </ul>
  67.   <script>
  68.     $(function () {
  69.       function tab(navItem, boxItem, navActiveClassName) {
  70.         navItem.click(function () {
  71.           $(this).addClass(navActiveClassName).siblings().removeClass(navActiveClassName);
  72.           boxItem.eq($(this).index()).show().siblings().hide();
  73.           var id = $(this).attr("id");//id命名需要和图片名称一样
  74.           navItem.each(function () {
  75.             var newId = $(this).attr("id");
  76.             if (id == newId) {
  77.               $(this).find("img").attr("src", "image/" + id + "_hover.png");//点亮的图片名称加_hover
  78.             } else {
  79.               $(this).find("img").attr("src", "image/" + newId + ".png");
  80.             }
  81.           })
  82.         })
  83.       }
  84.       tab($("#ul li"), $("#box li"), "active");
  85.     })
  86.   </script>
  87. </body>
  88.  
  89. </html>

jQuery 切换图片（图标）效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  3. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jquery 鼠标图片经过效果

    <script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...

  6. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. Android 轮播图Banner切换图片的效果

    Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910   版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...

  8. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  9. 使用UIScrollView和UIPageControl做一个能够用手势来切换图片的效果

    利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先增加UIScrollView和UIPageControl: -(void) loadView { ...

随机推荐

  1. vuejs源码摘抄（二）

    创建一个用来观察对象的observe类,这个类会附加在被观察的对象上,并且把被观察对象的属性值转换成getter/setter,同时,收集依赖和分发更新,实现代码如下: /* * not type c ...

  2. JS的封装（JS插件的封装）

    JS中类的概念类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法.方法也是一种特殊的对象. 类的方法在构造方法中初始化实例的方法(就是在构造 ...

  3. iDempiere 视频教程下载

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  4. envi利用矢量数据对影像做多边形裁剪 (转）

    2011-05-25 17:31:10|  分类: ENVI|举报|字号 订阅 来自:http://zhangling357522.blog.163.com/blog/static/184687296 ...

  5. springTask和Schedule学习

    Spring 4.x Task 和 Schedule 概述 http://www.jianshu.com/p/1778f6b9646e spring framework --- 定时任务(翻译官方文档 ...

  6. 多线程（七）~join方法的使用

    作用:join()方法的作用是等待线程对象销毁.     join()方法具有能使线程排队运行的作用,有点类似于同步的效果.       join与synchronize的区别:         jo ...

  7. Android学习——ViewPager的使用（一）

    这一节介绍使用ViewPager,加载ViewPager主要有三部分,数据源.适配器和ViewPager与适配器关联.其中数据源分为View对象和Fragment对象,这一节先来介绍View对象. 数 ...

  8. Android应用开发基础之七：广播与服务（一）

    广播 广播的概念 现实:电台通过发送广播发布消息,买个收音机,就能收听 Android:系统在产生某个事件时发送广播,应用程序使用广播接收者接收这个广播,就知道系统产生了什么事件. Android系统 ...

  9. 【Leetcode】【Easy】Plus One

    Given a non-negative number represented as an array of digits, plus one to the number. The digits ar ...

  10. bzoj4999 This Problem Is Too Simple！

    Description 给您一颗树,每个节点有个初始值. 现在支持以下两种操作: 1. C i x(0<=x<2^31) 表示将i节点的值改为x. 2. Q i j x(0<=x&l ...