javascript - 如何将当前类添加到单击的元素并在单击另一个元素时将其删除？

Question

我不太擅长 JavaScript，大部分时间我都使用其他人的作品。我想知道如何将当前类添加到以下代码，以便我可以更改所选元素。谢谢

function showonlyone(thechosenone) {
  $('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<a href="javascript:showonlyone(&#39;link1&#39;);">
  <div>
    <p>link1</p>
  </div>
</a>
<div class="newboxes" id="link1" style="display: none">
  <p>Content1</p>
</div>


<a href="javascript:showonlyone(&#39;link2&#39;);">
  <div>
    <p>link2</p>
  </div>
</a>
<div class="newboxes" id="link2" style="display: none">
  <p>Content2</p>
</div>

Answer 1

你可以使用

$(this).addClass('current-class');

并删除

$(this).removeClass('current-class');

function showonlyone(thechosenone) {

     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
     
     $('.link').each(function(index) {
          if ($(this).text() == thechosenone) {
               $(this).addClass('current');
          }
          else {
               $(this).removeClass('current');
          }
     });
}

.current {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<a href="javascript:showonlyone(&#39;link1&#39;);"><div><p class='link'>link1</p></div>
</a>
<div class="newboxes" id="link1" style="display: none">
<p>Content1</p>
</div>


<a href="javascript:showonlyone(&#39;link2&#39;);"><div><p class='link'>link2</p></div>
</a>
<div class="newboxes" id="link2" style="display: none">
<p>Content2</p>
</div>