通过使用 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>