如何实现点击缩略图画廊图片切换对应展示文本并隐藏旧内容

解决方案 #

先纠正个小误区：你用到的是前端脚本语言JavaScript，和Java是完全不同的两类编程语言，别搞混哦。
你只需要做3处修改就能实现需求： #

1. 修改HTML部分

给所有<img>标签加两个属性：onclick="showBlurb(this)" 绑定点击触发函数，data-blurb-id 关联对应的文本块id，和你现有文本块的对应关系调整后代码如下：

<main>
<div class="centre">
<div class="thumb" id="gallery">
<div class="imgthumb" id="web">
<img src="images/icn-web.svg" alt="" onclick="showBlurb(this);" data-blurb-id="hide1"/>   
</div>
<div class="imgthumb" id="des">
<img src="images/icn-des.svg" alt="" onclick="showBlurb(this);" data-blurb-id="hide2"/>
</div>
<div class="imgthumb" id="ads">
<img src="images/icn-ads.svg" alt="" onclick="showBlurb(this);" data-blurb-id="hide3"/>
</div>
<!-- 剩下3张图后续如果新增了对应文本块，继续加data-blurb-id匹配即可 -->
<div class="imgthumb" id="soc">
<img src="images/icn-soc.svg" alt="" onclick="showBlurb(this);"/>
</div>
<div class="imgthumb" id="prnt">
<img src="images/icn-prnt.svg" alt="" onclick="showBlurb(this);"/>
</div>
<div class="imgthumb" id="bus">
<img src="images/icn-bus.svg" alt="" onclick="showBlurb(this);"/>
</div>
</div>
<div class="servblurb">
<div class="servblurbctn" id="hide1">
<h1>JUST WEB CHECKING</h1>
</div>
<div class="servblurbctn" id="hide2">
<h1>JUST DES CHECKING</h1>
</div>
<div class="servblurbctn" id="hide3">
<h1>JUST SOC CHECKING</h1>
</div>
</div></div>
</main>

2. 修改CSS部分

新增文本块默认隐藏的样式，避免初始状态所有文本同时展示：

body, html {
margin: 0;
padding: 0;
}

.centre {
margin: auto;
width: 90%;
max-width: 1200px;
}
.thumb {
width: 100%;
height: auto;
padding: 2%;
overflow-x: scroll;
}

.imgthumb {
display: inline-block;
width: 12%;
padding: 2%;
height: auto;
margin: auto;    
}
.imgthumb:hover {
opacity: 0.5;
transition: 0.4s;
cursor: pointer;
}
/* 新增：所有文本块默认隐藏 */
.servblurbctn {
  display: none;
}
/* 如果需要默认展示第一个文本块，就加下面这段，不需要可以删掉 */
.servblurbctn:first-child {
  display: block;
}

3. 修改JavaScript部分

重写showBlurb函数，实现先隐藏所有文本块、再展示当前点击对应文本块的逻辑：

function showBlurb(clickedImg) {
  // 拿到当前点击图片对应的文本块id
  const targetId = clickedImg.dataset.blurbId;
  // 没有对应关联的文本块就直接终止执行
  if(!targetId) return;
  // 第一步：隐藏所有已存在的文本块
  const allBlurbs = document.querySelectorAll('.servblurbctn');
  allBlurbs.forEach(blurb => {
    blurb.style.display = 'none';
  });
  // 第二步：展示当前点击对应的文本块
  document.getElementById(targetId).style.display = 'block';
}

后续如果要新增剩下3张图片的对应文本，只需要给新文本块设置id，再给对应图片的data-blurb-id属性赋值为新文本块的id即可，不需要调整JS逻辑。

内容的提问来源于stack exchange，提问作者Morgan Oliver