<!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. sass文件处理

    sass注释方式有两种: 1.标准的css注释/**/: 2.//双斜杠形式的单行注释(不会被转译): 标准的css注释 双斜杆单行注释 sass文件后缀名有两种: 1.后缀名为sass,不适用用大括 ...

  2. 从psd文件到html

    纲要 计划布局,划分整体结构 内容区域,从整体到局部,局部中的通用部分,根据上下文应用样式 公共头部(public-header).尾部(public-footer) 公共容器(public-cont ...

  3. 如何取消IntelliJ IDEA打开默认项目配置

    一.前言            在前端中,个人比较喜欢使用IntelliJ IDEA开发工具!IntelliJ IDEA是非常强大的开发集成工具,打开IntelliJ IDEA软件默认会打开最近一次的 ...

  4. AngularJs整合ui-bootstrap以及ui-grid

    1. ui-bootstrap 参考博客:  http://www.cnblogs.com/pilixiami/p/5597634.html  (这篇博客写的非常不错,值得推荐) angular-ui ...

  5. C++字符分割

    AfxExtractSubString 表头: <afxwin.h> BOOL AFXAPI AfxExtractSubString ( CString& rString, LPC ...

  6. 深度搜索C语言伪代码

    bool DFS(Node n, int d){ if (d == 4){//路径长度为返回true,表示此次搜索有解 return true; } for (Node nextNode in n){ ...

  7. 2016微软技术大会Azure相关回顾

    3 天的时间稍纵即逝,伴随着本届大会压轴大奖的揭晓,2016 年度的微软技术大会完美落幕.以“数字化转型”为主题,来自微软全球的近百位顶尖技术专家.工程师和业务负责人拔冗而至,在 130 余场的专业技 ...

  8. C 中重载一词中的“重”字读ZHONG4还是CHONG2?

    in my opinion: overload: 重zhong4载override overwrite:覆盖,改写,重写.//csdn上有人问过,没有overwrite这个词 http://bbs.c ...

  9. 第二次作业(Git and Github)

       第二次作业(Git and Github) 1.Github项目地址: https://github.com/YanSiJu/JavaWebProject.git 具体介绍详见READ.md 2 ...

  10. Jerry的Fiori原创文章合集

    我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发: My Opportunities My Tasks ...