<!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. html笔记【重新学习】

    <a></a>超链接标签: a标签有个target属性,<a href="#" target = "_self">在当前选项 ...

  2. 【代码笔记】Java连连看项目的实现(1)——JTable 、TableModel的使用

    javax.swing.table.TableModel和javax.swing.JTable JTable .TableModel是Java里面画表格的包. TableModel:为Table提供显 ...

  3. jQuery可调整表和列宽插件-colResizable

    最基本的例子 引入JS <script src="js/jquery-1.8.0.min.js" type="text/javascript">&l ...

  4. all-to-mqtt

  5. AS打包出现app:transformClassesAndResourcesWithProguardForRelease错误

    今天打包项目的正式签名APK出现以下错误,当时挺着急用的实在没办法就只能用测试apk凑合来对付一下了 Error:Execution failed for task ':app:transformCl ...

  6. Matlab GUI保存图片

    % --- Executes on button press in pushbutton5. function pushbutton5_Callback(hObject, eventdata, han ...

  7. 关于scheduleAtFixedRate方法与scheduleWithFixedDelay的使用

    一.scheduleAtFixedRate方法 该方法是ScheduledExecutorService中的方法,用来实现周期性执行给定的任务,public ScheduledFuture<?& ...

  8. 学习spring mvc

    http://www.cnblogs.com/bigdataZJ/p/springmvc1.html

  9. Azure 8月众多新版本公布

    Azure 8月新发布:IoT 中心S3 版,Azure 热/冷存储层,DocumentDB,SQL Server Stretch Database, MySQL 5.7, Cloud Foundry ...

  10. 安装字体或直接调用非注册字体 z

    1.安装字体//程序直接将字体文件安装的系统中.函数声明:[DllImport("kernel32.dll", SetLastError = true)] static exter ...