通过使用jQuery库来实现导航栏切换；分析如下：1、首先建立一个就绪函数ready函数，把所有的jQuery内容都写到这个函数中。2、选中按钮元素并绑定单击事件3、选中img图片，通过eq（）方法找到对应的图片元素4、其中eq（）的参数通过$(this).index（）方式获取当前的索引。5、通过css（）方法对图片的透明度设置为1来显示。6、再通过siblings（）找到当前选中按钮的兄弟元素，并通过css（）设置透明度为0。效果图如下：具体代码如下：<!DOCTYPE html><html lang=“en”><head><meta charset=“UTF-8”><meta name=“viewport” content=“width=device-width, initial-scale=1.0”><meta http-equiv=“X-UA-Compatible” content=“ie=edge”><title>云南旅游相册</title><style> /* 清除样式 / { margin: 0; padding: 0; border: none; } html, body{ background-color: #91b0c8; / 高度设置为100%自设置 / height: 100%; } / 按钮 / span{ display: block; margin: 20px auto 30px; width: 20px; height: 20px; background-color: white; border-radius: 50%; } / 导航条 / nav{ position: relative; display: flex; width: 80vw; margin: 0 auto 25px; justify-content: space-between; } / 各导航之间的导航链接线使用伪类选择器来实现，但是伪类是行级元素需要转块元素 content属性与 :before 及 :after 伪元素配合使用，来插入生成内容/ nav:before{ position: absolute; top: 20px; width: 100%; height: 15px; background-color: white; display: block; content: ‘’; } nav > a{ position: relative; color: #4aa0d6; font-size: 17px; border: 2px solid #5395b4; padding: 10px; background-color: white; text-decoration: none; } /* 图片 */ div{ position: relative; width: 80vw; height: 78vh; background-color: white; margin: 0 auto 20px; } div > img{ width: 98%; height:96%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }</style></head><body><!– 按钮 –><span></span><!– 导航条 –><nav> <a href="#">泸沽湖</a> <a href="#">丽江古城</a> <a href="#">茶马古道</a> <a href="#">就这家●云逸客栈</a> <a href="#">西双版纳</a> <a href="#">云南红酒庄</a> <a href="#">轿子雪山</a> <a href="#">普者黑</a> <a href="#">海埂大坝</a> <a href="#">玉龙湾</a> <a href="#">昆明郊野公园</a> <a href="#">欧洲风琴</a></nav><!– 图片区 –><div> <img src=“images/1.jpg” alt=“泸沽湖” title=“泸沽湖”> <img src=“images/2.jpg” alt=“丽江古城” title=“丽江古城”> <img src=“images/3.jpg” alt=“茶马古道” title=“茶马古道”> <img src=“images/4.jpg” alt=“就这家●云逸客栈” title=“就这家●云逸客栈”> <img src=“images/5.jpg” alt=“西双版纳” title=“西双版纳”> <img src=“images/6.jpg” alt=“云南红酒庄” title=“云南红酒庄”> <img src=“images/7.jpg” alt=“轿子雪山” title=“轿子雪山”> <img src=“images/8.jpg” alt=“普者黑” title=“普者黑”> <img src=“images/9.jpg” alt=“海埂大坝” title=“海埂大坝”> <img src=“images/10.jpg” alt=“玉龙湾” title=“玉龙湾”> <img src=“images/11.jpg” alt=“昆明郊野公园” title=“昆明郊野公园”> <img src=“images/12.jpg” alt=“欧洲风琴” title=“欧洲风琴”></div><script src=“http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><!-- 原jquery网址上增加cdn.bootcss.com –><!– https://code.jquery.com/jquery-3.3.1.min.js –><script> // 原始书写方法$(document).ready(function(){ $(‘a’).click(function(){ $(‘img’) .eq($(this).index()) .css({‘opacity’:‘1’}) .siblings() .css({‘opacity’:‘0’}) })})</script></body></html>