如何分别单击多个具有相同类的 html 标签，并将样式添加到另一个具有多个 Jquery 或 JavaScript 类的 div

Question

我创建了一个包含三个链接的部分，当您单击其中一个链接时，它会显示一些内容。当您单独单击每个链接时，它会显示特定内容（内容 1、内容 2 和内容 3）。

您可以从屏幕截图中看到有两个相同的部分（第 1 部分和第 2 部分）。

我的问题是，当我位于两个部分中的任何一个时，当我单击其中一个链接时，正在显示的内容同时显示在两个部分中。我希望当您位于特定部分并单击链接时拥有它，它仅显示该特定部分中的内容，而不是同时显示两者。

任何有关 JQuery 的帮助我都会非常感激！我也对普通 JavaScript 解决方案持开放态度。

我的 JQuery 不是最好的，所以我目前拥有的，如果有更好的编码方法，我绝对愿意接受它并提供已解决的答案。

这是它的代码：

<a href="https://codepen.io/dan-zins/pen/mdammed">codepen</a>

我在此网站和其他各个网站中进行了搜索，但尚未找到解决我的具体问题的解决方案。我尝试了 data-id、$(this) 到 onclick 等

Answer 1

快速修复。将更改范围限制为单击的元素的父级。

还有更好的方法，我很快就会添加。

$('.link-1').on('click', function () {
    var parent = $(this).closest(".section");
    parent.find('.content-1').css({ 'display': 'block' });
    parent.find('.content-2').css({ 'display': 'none' });
    parent.find('.content-3').css({ 'display': 'none' });
});

$('.link-2').on('click', function () {
    var parent = $(this).closest(".section");
    parent.find('.content-1').css({ 'display': 'none' });
    parent.find('.content-2').css({ 'display': 'block' });
    parent.find('.content-3').css({ 'display': 'none' });
});

$('.link-3').on('click', function () {
    var parent = $(this).closest(".section");
    parent.find('.content-1').css({ 'display': 'none' });
    parent.find('.content-2').css({ 'display': 'none' });
    parent.find('.content-3').css({ 'display': 'block' });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
    border: 1px solid #000;
    margin: 20px;
    width: 400px;
    padding: 25px 0;
}

.section-header {
  margin: 5px 20px;
}

li {
  display: inline-block;
  margin: 30px;
}

.content-container {
  display: flex;
}

.content {
  margin: 0 20px;
  display: none;
}

.content:nth-child(2) {
  margin-left: 117px;
}

.content:nth-child(3) {
  margin-left: 217px;
}

.link-colorchange {
  color: red;
}

.display {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
    <h2 class="section-header">Section 1</h2>
    <nav>
      <ul>
        <li><a href="#" class="link link-1">link 1</a></li>
        <li><a href="#" class="link link-2">link 2</a></li>
        <li><a href="#" class="link link-3">link 3</a></li>
      </ul>
    </nav>
    <div class="content-container">
      <div class="content content-1">
        content 1
      </div>
      <div class="content content-2">
        content 2
      </div>
      <div class="content content-3">
        content 3
      </div>
    </div>
  </div>
  
  <br />
  <br />

  <!-- Section 2 -->
  <div class="section">
    <h2 class="section-header">Section 2</h2>
    <nav>
      <ul>
        <li><a href="#" class="link link-1">link 1</a></li>
        <li><a href="#" class="link link-2">link 2</a></li>
        <li><a href="#" class="link link-3">link 3</a></li>
      </ul>
    </nav>
    <div class="content-container">
      <div class="content content-1">
        content 1
      </div>
      <div class="content content-2">
        content 2
      </div>
      <div class="content content-3">
        content 3
      </div>
    </div>
  </div>