jQuery 切换图片(图标)效果
2024-08-29 01:55:25
<!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>
最新文章
- iOS 字典或者数组和JSON串的转换
- 《Diagnostic use of facial image analysis software in endocrine and genetic disorders: review, current results and future perspectives》学习笔记
- 通过JavaScript脚本实现验证码自动输入
- cocos2d对动画的各种操作
- BCB一个问过100遍啊100遍的问题
- dataStructure@ Check whether a given graph is Bipartite or not
- 一些关于linux 下的jni下问题
- 使用Publish Over SSH插件实现远程自动部署
- DataBase MongoDB高级知识
- 浅析Python多线程
- Javascript数组系列三之迭代方法2
- luogu3233 世界树 (虚树)
- HDU - 6394 Tree(树分块+倍增)
- 说说erlang tuple和record结构
- day037 mysql之单表查询
- pandas的to_csv函数
- MySQL:ERROR 2003 (HY000): Can&#39;t connect to MySQL server on &#39;localhost&#39; (10061)
- 一个Elasticsearch嵌套nested查询的实例
- 114th LeetCode Weekly Contest Array of Doubled Pairs
- 使用CTE公用表表达式的递归查询(WITH AS)
热门文章
- cf1072B. Curiosity Has No Limits(枚举)
- EBS登陆界面IE显示异常
- android 调试卡在:Waiting for Debugger - Application XXX is waiting for the debugger to Attach"; 解决方法
- 《ArcGIS Runtime SDK for Android开发笔记》——(10)、ArcGIS Runtime SDK支持的空间数据类型
- meat标签使用
- apache-实战(一)
- Win10提示“您未连接到nvidia gpu的显示器”的解决方法
- Jmeter入门12 __time函数 jmeter获取当前系统时间
- Flexbox 布局的最简单表单
- python:部分内置函数与匿名函数