jquery在没有硬编码的情况下显示/隐藏div中的内容(jquery show/hide content in div without hardcoding)

 我有3个div，里面有内容（图像）。 当您点击其中一个内容时，其内容将变为可见，其他两个内容将被隐藏。 我已经设法用jquery代码来实现它（你可以在下面检查它），但是它是硬编码的坏东西，有没有其他方法可以做到这一点？ 
 
 PS：“ https://solomia-gera.github.io/ ”是网站本身，如果你想看看。 
 
 -------------------------------------------------- - - - -代码 - - - - - - - - - - - - - - - - - - - - - ------------ 
 
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content1").hide();
  });
  $("#mox3").on("click", function () {
  $("#content1").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content1").show();
  });
</script>

<!-- Hide/Show DIV2 content-->
<script>
  $("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content2").hide();
  });
  $("#mox3").on("click", function () {
  $("#content2").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content2").show();
  });
</script>

<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
 $("#mox2").on("click", function () {
 $("#content3").hide();
  });
 $("#mox1").on("click", function () {
 $("#content3").hide();
 });
  // Show content in div with id#mox when cliked on div with id#content
 $("#mox3").on("click", function () {
 $("#content3").show();
 });
 

I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
 
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
 
---------------------------------------------------------THE CODE-----------------------------------------------------
 
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content1").hide();
  });
  $("#mox3").on("click", function () {
  $("#content1").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content1").show();
  });
</script>

<!-- Hide/Show DIV2 content-->
<script>
  $("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content2").hide();
  });
  $("#mox3").on("click", function () {
  $("#content2").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content2").show();
  });
</script>

<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
 $("#mox2").on("click", function () {
 $("#content3").hide();
  });
 $("#mox1").on("click", function () {
 $("#content3").hide();
 });
  // Show content in div with id#mox when cliked on div with id#content
 $("#mox3").on("click", function () {
 $("#content3").show();
 });
 

原文：https://stackoverflow.com/questions/42807240