实现如下图所示的列表文字切换图片的效果

最新推荐文章于 2022-02-06 15:10:15 发布

zhangh8627

最新推荐文章于 2022-02-06 15:10:15 发布

阅读量684

点赞数

分类专栏：前端文章标签： html 列表文字切换图片

本文链接：https://blog.csdn.net/zhangh8627/article/details/50233429

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//liD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.lid">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style>
			ul,li {padding: 0; margin: 0;}
			.prduct_list {
				width: 420px;
				height: 340px;
				overflow: hidden;
			}
			.prduct_list ul {
				width: 195px;
				float: left;
			}
			.prduct_list ul li a {
				line-height: 25px;
				text-decoration: none;
				color: blue;
				display: block;
			}
			.prduct_list ul li a:hover {
				background-color: #CCCCCC;
				color: black;
			}
			.prduct_list .three {
				width: 215px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="prduct_list">
			<ul>
				<li data-url="http://www.aeno.cn/category17.htm" data-img="http://www.aeno.cn/upload/20151208/150427301657.jpg">
					<a href="http://www.aeno.cn/category17.htm"><span>角行程气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category18.htm" data-img="http://www.aeno.cn/upload/20151208/150713427342.jpg">
					<a href="http://www.aeno.cn/category18.htm"><span>直行程气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category31.htm" data-img="http://www.aeno.cn/upload/20151208/150746055361.jpg">
					<a href="http://www.aeno.cn/category31.htm"><span>不锈钢气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category32.htm" data-img="http://www.aeno.cn/upload/20151208/150826771178.jpg">
					<a href="http://www.aeno.cn/category32.htm"><span>三段式气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category40.htm" data-img="http://www.aeno.cn/upload/20151208/150911103542.jpg">
					<a href="http://www.aeno.cn/category40.htm"><span>气动球阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category37.htm" data-img="http://www.aeno.cn/upload/20151208/151023957408.jpg">
					<a href="http://www.aeno.cn/category37.htm"><span>气动蝶阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category42.htm" data-img="http://www.aeno.cn/upload/20151208/151048134420.jpg">
					<a href="http://www.aeno.cn/category42.htm"><span>气动闸阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category39.htm" data-img="http://www.aeno.cn/upload/20151208/151118292956.jpg">
					<a href="http://www.aeno.cn/category39.htm"><span>气动截止阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category38.htm" data-img="http://www.aeno.cn/upload/20151208/151139491730.jpg">
					<a href="http://www.aeno.cn/category38.htm"><span>气动角座阀</span></a>
				</li>
			</ul>
			<div class="three">				
				<a href="" target="_blank"><img src="" width="200" height="200"><p>点击查看</p></a>
			</div>
		</div>
		<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
		<script type="text/javascript">
			$('.prduct_list ul li').mouseenter(function(){
//				console.log($(this).data('url'));
				$('.three a').attr('href',$(this).data('url'));
				$('.three a img').attr('src',$(this).data('img'));
			});
			$('.three a').attr('href',$('.prduct_list ul li:eq(0)').data('url'));
			$('.three a img').attr('src',$('.prduct_list ul li:eq(0)').data('img'));
		</script>
	</body>
</html>

实现如下图所示的列表文字切换图片的效果

代码如下：

zhangh8627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现如下图所示的列表文字切换图片的效果

<!DOCTYPE html PUBLIC "-//W3C//liD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.lid"> ul,li {padding: 0; margin: 0;} .prduct_list { width: 420px; height: 340px; ove
复制链接

扫一扫