<!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. 前端使用express+node实现接口模拟及websocket通讯

    简述如何使用node+express实现接口连接及入门websocket通讯.使用技术栈:node + express + typescript + websocket. 1.接口实现 这里描述前端如 ...

  2. node.js-cancelled because Node.js is unresponsive

    今天初学node.js,但是在使用vs code 进行启动调试的时候出现了一个问题 这个报错,一开始我并不知道是什么意思.(而截至我写这个笔记我也还没了解清楚) 大概翻译出来的意思是说 “node.j ...

  3. win环境下jdk7与jdk8共存问题

    1.jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe.javaw.exe.javaws.exe三个文件cop ...

  4. Angular js ng-bind 和ng-module的区别

    1.ng-bind 是从$scope ->view 的单向绑定 ,<span ng-bind="object.***"></span>只用于展示数据 ...

  5. Winform中 DataGridView控件中的 CheckBox 的值读出来 始终 为 False ,已解决

    private void DGV_DetailsViewer_CellContentClick(object sender, DataGridViewCellEventArgs e) { )) { D ...

  6. Spyder更改默认工作路径已经文件路径

    打开spyder,选择菜单栏中的Tools--->Preferences--->Current working directory   然后选择最下面的单选按钮The following ...

  7. Selenium2学习（八）-- 操作元素（键盘和鼠标事件）

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  8. Facebook 新开源了 2 个东西，一个语音识别系统（wav2letter++）和一个机器学习库（flashlight）

    Open sourcing wav2letter++, the fastest state-of-the-art speech system, and flashlight, an ML librar ...

  9. 【Spring实战】—— 15 Spring JDBC模板使用

    前一篇通过对传统的JDBC的使用操作,可以体会到使用的繁琐与复杂,套句话说,是用了20%作了真正的工作,80%作了重复的工作. 那么通过本篇,可以了解如下的内容: 1 如何配置数据源 2 如何在spr ...

  10. day2 数据结构和一些基础知识

    请查看我的云笔记链接: http://note.youdao.com/noteshare?id=4171342601326695ec87866e1cc3e410&sub=20CFB149543 ...