<!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. scss-字符串连接符

    + 运算可用于连接字符串: // SCSS p { cursor: e + -resize; } // 编译后的 CSS 样式 p { cursor: e-resize; } 请注意,如果带引号的字符 ...

  2. 14_synchronized深入

    [脏读] 对于对象同步和异步的方法,我们在设计程序的时候,一定要考虑问题的整体,不然会出现不一致的错误,最经典的错误的就是脏读(dirty read). [实例代码] package com.higg ...

  3. sql注入一点小心得

    好久没写技术博客,最近研究产品关于用户体验方面较多,加上项目突然比较多,设计原型.跟进开发.设计师等工作着实没时间写博客. 接下来技术上主要php深入学习和mysql优化.这两天看了关于sql注入方面 ...

  4. mac nvm install

    open the url https://github.com/creationix/nvm 1. curl -o- https://raw.githubusercontent.com/creatio ...

  5. 【Leetcode】【Easy】Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  6. Angular项目新建

    Angular新建项目步骤记录 标签(空格分隔): Angular 1. ng new my-app 2. 启动dev环境 cd my-app ng serve --open 3. 修改styles. ...

  7. tomcat、Apache服务器外网无法访问80和8080端口，其他端口可以访问

    tomcat.Apache服务器外网无法访问80和8080端口,其他端口都可以访问,很明显地看出这是网络运营商的问题,他们把80和8080端口对外访问屏蔽了. 解释:这两个端口是常用的HTTP协议端口 ...

  8. Qt 窗口移动实现

    很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...

  9. Ubuntu 下安装Mongodb

    Mongodb是一款开源的数据库,这里不用我多说了,下面说一下Ubuntu下安装Mongodb可能遇到的问题和解决方案. 故事背景: 今天M$促销,1￥Windows Azure 4000￥-30天的 ...

  10. python UI自动化实战记录一：测试需求与测试思路

    测试需求: 项目包含两个数据展示页面,数据均来自于四个数据源接口. 测试操作步骤: 选择5个大类型中的一个,每个大类型下有3个子类型,选择任一子类型,页面数据更新.需验证页面上的数据与数据源接口数据一 ...