js实现点击切换图片，常用于图片画廊、产品展示、选项卡切换等

        以下代码实现产品展示或图片画廊相关的功能。具体来说，它实现了一个带有导航和对应内容区域的产品展示页面。用户通过导航来浏览不同的产品/项目，并在内容区域中查看与每个产品/项目相关的详细信息（在这种情况下是两张图片）。

1. 导航与内容的联动：页面有一个导航区域（由nav元素表示）和一个内容区域（由content元素表示）。导航区域包含一系列的span元素，每个span元素代表一个产品/项目，并显示其名称。内容区域包含一系列的div元素，每个div元素包含两个图片，代表相应产品的两张图片。
2. 点击导航切换内容：当用户点击导航区域中的某个span元素时，内容区域中的对应div（与点击的span具有相同的索引）会被高亮显示（通过添加一个名为show的类），而其他div则不会被高亮。同时，被点击的span也会获得一个名为siz的类
3. 初始状态：在代码的最后，默认将第一个div和第一个span设置为高亮状态（通过添加show和siz类）。

let car={
    一堆数据
}
//第一种 版本 更换src
let data = car.data;//这是已经定义好的数据
let nav = document.querySelector(".nav");
for(let i=0;i<data.length;i++){
	let span = document.createElement("span");
	span.innerText = data[i].name;
	span.onclick = function (){
		let imgs = document.querySelectorAll("img");
		imgs[0].setAttribute("src",data[i].pics[0]) 
		imgs[1].setAttribute("src",data[i].pics[1]) 
	}
	nav.appendChild(span);
}
let imgs = document.querySelectorAll("img");
imgs[0].setAttribute("src",data[0].pics[0]) 
imgs[1].setAttribute("src",data[0].pics[1]) 

//第二种方法 渲染所有节点 显示隐藏
let data = car.data;
	let nav = document.querySelector(".nav");
	let content = document.querySelector(".content");
	for(let i=0;i<data.length;i++){
		let span = document.createElement("span");
		span.innerText = data[i].name;
		span.onclick = function (){
			// 先清空类名
			document.querySelector(".show").className = "";
			let divs = document.querySelectorAll(".content div");
			// 获取content 下的所有div 
			divs[i].className = "show";
			// 给和span相同顺序的 div 添加类名
			document.querySelector(".siz").className = "";
			let span = document.querySelectorAll(".nav span");
			span[i].className = "siz";
		}
		nav.appendChild(span);

		let div = document.createElement("div");
		let img1 = document.createElement("img");
		let img2 = document.createElement("img");
		img1.setAttribute("src",data[i].pics[0]);
		img2.setAttribute("src",data[i].pics[1]);
		div.appendChild(img1)
		div.appendChild(img2)
		content.appendChild(div);
	}
	let divs = document.querySelectorAll(".content div");
	let span = document.querySelectorAll(".nav span");
	divs[0].className = "show";
	span[0].className = "siz";

*{
	margin: 0;
	padding: 0;
}
.nav{
	width: 80%;
	margin: 0 auto;
	height: 65px;
	display: flex;
}
.nav span{
	flex: 1;
	height: 65px;
	text-align: center;
	line-height: 65px;
	font-size: 24px;
	font-weight: bold;
}
.content{
	width: 80%;
	height: 500px;
	margin: 0 auto;
}
.content img{
	width: 49%;
}
.content div{
    display: none;
}
/*特殊类名 谁有这个类名谁显示*/
.content .show{
	display: block;
}
.nav .siz{
	background: orange;
}

<div class="nav"></div>
<div class="content"></div>