<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul,

    li {

      list-style: none;

    }

    body {

      background: #f6f6f6;

    }

    .active {

      background: red;

    }

    #box li {

      display: none;

    }

    #ul {

      background: #fff;

    }

    #ul li {

      float: left;

      width: 200px;

    }

    #ul li img {

      width: 60px;

      padding: 10px;

    }

    #ul:after {

      content: "020";

      display: block;

      height: 0;

      clear: both;

      visibility: hidden;

    }

  </style>

</head>

<body>

  <ul id="ul">

    <li id="n1" class="active"><img src="data:image/n1_hover.png"></li>

    <li id="n2"><img src="data:image/n2.png"></li>

    <li id="n3"><img src="data:image/n3.png"></li>

  </ul>

  <ul id="box">

    <li style="display: block">111</li>

    <li>222</li>

    <li>333</li>

  </ul>

  <script>

    $(function () {

      function tab(navItem, boxItem, navActiveClassName) {

        navItem.click(function () {

          $(this).addClass(navActiveClassName).siblings().removeClass(navActiveClassName);

          boxItem.eq($(this).index()).show().siblings().hide();

          var id = $(this).attr("id");//id命名需要和图片名称一样

          navItem.each(function () {

            var newId = $(this).attr("id");

            if (id == newId) {

              $(this).find("img").attr("src", "image/" + id + "_hover.png");//点亮的图片名称加_hover

            } else {

              $(this).find("img").attr("src", "image/" + newId + ".png");

            }

          })

        })

      }

      tab($("#ul li"), $("#box li"), "active");

    })

  </script>

</body>

</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. 详解JavaScript UTC时间转换方法

    这篇文章主要介绍了JavaScript UTC时间转换方法,介绍了本地时间到UTC时间的转换.UTC日期到本地日期的转换,感兴趣的小伙伴们可以参考一下 一.前言 1.UTC: Universal Ti ...

  2. 使用HTML5 canvas做地图（2）瓦片以及如何计算的

    上一篇也说到瓦片,我们为什么使用瓦片?这一篇主要是关于如何拼接地图? 下面的一张图,可以一眼明了,地图是如何切割以及拼接的. 瓦片信息 瓦片信息包括切图原点,瓦片大小,格式,分辨率以及分辨率级别等. ...

  3. 【起航计划ObjC 003】印第安老斑鸠ObjC的幻想 ---- ObjC经典问题

    1.Objective-C的类可以多重继承么?可以采用多个协议么? 答:不可以多重继承,可以采用多个协议. 2.#import和#include的区别是什么?#import<> 跟 #im ...

  4. Hadoop ->> MapReduce编程模型

    对于MapReduce模型的实现,有Java等一些语言实现了接口,或者用像Hive/Pig这样的平台来操作.MapReduce由Map函数.Reduce函数和Main函数实现.第一步,源数据文件按默认 ...

  5. c#中abstract、override、new、virtual、sealed使用和示例

    原文地址:http://blog.csdn.net/richerg85/article/details/7407544 abstract      修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽 ...

  6. 【css基础】html图片右上角加上删除按钮

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 初涉京东及淘宝开放平台API-商品模型

    ============ 京东 ============ [Product]http://help.jd.com/jos/question-568.html#A2ware_id(相当于SPU?)sku ...

  8. leetcode 322零钱兑换

    You are given coins of different denominations and a total amount of money amount. Write a function ...

  9. 单独使用JDBC编程

    一.jdbc编程步骤 1. 加载数据库驱动 2. 创建并获取数据库链接 3. 创建jdbc statement对象 4. 设置sql语句 5. 设置sql语句中的参数(使用preparedStatem ...

  10. SignalR中的依赖注入

    什么是依赖注入? 如果你已经熟悉依赖注入可以跳过此节. 依赖注入 (DI) 模式下,对象并不为自身的依赖负责. 下边的例子是一个主动 DI. 假设你有个对象需要消息日志.你可能定义了一个日志接口: C ...