<!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. 让zepto支持ie

    找到zepto源码:修改为如下代码: zepto.Z = function(dom, selector) { dom = dom || [] // 支持ie10,主要是支持wp8 if(window. ...

  2. alpinelinux

    https://wiki.alpinelinux.org/wiki/Tutorials_and_Howtos https://nixos.org/nix/manual/#ch-installing-b ...

  3. GIS中的坐标系定义与转换

    GIS中的坐标系定义与转换 青岛海洋地质研究所 戴勤奋 2002-3-27 14:22:47 ----------------------------------------------------- ...

  4. wxPython控件学习之wx.grid.Grid 表格控件

    wxPython控件学习之wx.grid.Grid (包括对GridCellEditor和GridCelRender的扩展,以支持更多的grid cell 样式, 以GridCellColorEdit ...

  5. Tomcat 数据源的原理、配置、使用

    1.数据源的作用及操作原理 在程序代码中使用数据源是可以提升操作性能的,这种性能的提升依靠于运行的原理. 传统JDBC操作步骤 1.加载数据库驱动程序,数据库驱动程序通过CLASSPATH配置: 2. ...

  6. Oracle 查看session级别信息

    1. 查看活动会话信息[sql] view plain copySELECT *    FROM V$SESSION   WHERE USERNAME IS NOT NULL     AND STAT ...

  7. ABAP的权限检查跟踪(Authorization trace)工具

    事务码 STAUTHTRACE 1. 点击"Activate Trace" button激活跟踪: 可以看到跟踪状态已经处于打开状态. 在同一个application server ...

  8. 浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    转发网址:https://www.cnblogs.com/wenzheshen/p/7724065.html 当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F1 ...

  9. Android（java）学习笔记22：我们到底该如何处理异常？

    1. 我们到底该如何处理异常? (1)原则: 如果该功能内部可以将问题处理,用try,自己能解决就自己解决问题. 如果处理不了,交由调用者处理,这是用throws,自己不能解决的问题,我们就抛出去交个 ...

  10. python:正则模块

    1,正则表达式 正则表达式是用来做字符串的匹配的,正则有他自己的规则,和python没有关系,一种匹配字符串的规则. 2,字符组 在同一个位置可能出现的各种字符组成了一个字符组,在正则表达式中用[]表 ...