jQuery实现点击菜单显示对应图片

最新推荐文章于 2022-07-04 21:16:14 发布

等一杯清茶

最新推荐文章于 2022-07-04 21:16:14 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45223595/article/details/113862058

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

jQuery实现点击菜单显示对应图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	a{
		text-decoration: none;
	}
	.tab-a {
	    display: inline-block;
	    padding: 5px 0;
	    margin: 0 15px;
	    border-bottom: 3px solid transparent;
	    color: #343;

	    font-size: 14px;
	}
	.tab .active {
	    border-bottom-color: #019EE4;
	    color: #019EE4;
	}
	.panel {
	    padding: 15px;
	}
	.panel img {
	    display: none;
	}
	.panel .active {
	    display: inline-block;
	}

	</style>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
	<div id="tab" class="tab">
		<a href="javascript:;" class="tab-a active">图片一</a>
		<a href="javascript:;" class="tab-a">图片二</a>
		<a href="javascript:;" class="tab-a">图片三</a>
	</div>
	<div id="panel" class="panel">
	    <img src="../static/images/六轴两机器.png" class="active">
	    <img data-src="../static/images/1.jpeg">
	    <img data-src="../static/images/1.jpg">
	</div>
	<script>
        var elAs = $('#tab a'), elImgs = $('#panel img');

        // 选项卡点击行为
        elAs.each(function(index) {
            $(this).data('index', index).click(function() {
                var target = elImgs.eq($(this).data('index'));
                // 选项卡UI
                $(this).addClass('active').siblings('a').removeClass('active');
                // 面板显隐
                target.addClass('active').siblings('img').removeClass('active');
            });
        });

        // 本demo的最重点，hover行为预加载图片
        elAs.on({
            mouseenter: function() {
                var target;
                if (!this.preloaded) {
                    target = elImgs.eq($(this).data('index'));
                    // 图片地址换成真实地址
                    target.attr('src', target.attr('data-src')).removeAttr('data-src');
                    // 标记已加载
                    this.preloaded = true;
                }
            }
        });
	</script>
</body>
</html>

在这里插入图片描述

等一杯清茶

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现点击菜单显示对应图片

jQuery实现点击菜单显示对应图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a{ text-decoration: none; } .tab-a { display: inline-block; padding: 5px 0;
复制链接

扫一扫

专栏目录