差不多了
这更简单，也更有效

$(function() {
  $('.showSingle').on('click', function() {
    const target = $(this).attr('target');
    const $li = $(this).closest('li');
    $('li.active').removeClass('active'); // remove all active 
    $li.addClass('active');
    $('.targetDiv').hide(); // hide all
    $(`#div${target}`).show();
  });
});

个字符
然而，正如评论所说，不要使用target，而应使用data-attributes，或者在我看来更好，href

$(function() {
  $nav = $('#nav').on('click', '.showSingle', function() {
    const target = $(this).attr('href');
    const $li = $(this).closest('li');
    $('li.active', $nav).removeClass('active'); // remove all active 
    $li.addClass('active');
    $('.targetDiv').hide(); // hide all
    console.log(target)
    $(target).show();
  });
});

x

a {
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="nav">
  <li class="active">
    <a class="showSingle" href="#div1">Show div 1</a>
  </li>
  <li>
    <a class="showSingle" href="#div2">Show div 2</a>
  </li>
</ul>
<br /><br />
<section id="div1" class="targetDiv">
  Content div 1
</section>
<section id="div2" class="targetDiv" hidden>
  Content div 2
</section>

的一种或多种
下面是一个CSS改进，因为如果从外部链接，它将显示目标div

$(function() {
  const $nav = $('#nav').on('click', '.showSingle', function() {
    const target = $(this).attr('href');
    const $li = $(this).closest('li');
    $('li.active', $nav).removeClass('active'); // remove all active 
    $li.addClass('active');
  });
  const hash = location.hash || $('.showSingle').first().attr('href');
  if (hash && hash.startsWith('#div')) {
    $activate = $nav.find(`[href="${hash}"]`);
    if ($activate.length ===1) $activate.closest('li').addClass('active');
  }  
});

x

a {
    text-decoration: none;
}
.active { background-color: green }
.targetDiv {
    display: none; /* Hide all targetDiv elements by default */
}
.targetDiv:target {
    display: block; /* Show the targetDiv if it's the target of the URL fragment */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="nav">
  <li>
    <a class="showSingle" href="#div1">Show div 1</a>
  </li>
  <li>
    <a class="showSingle" href="#div2">Show div 2</a>
  </li>
</ul>
<br /><br />
<section id="div1" class="targetDiv">
  Content div 1
</section>
<section id="div2" class="targetDiv">
  Content div 2
</section>