使用if else条件不是多个元素的通用方式。因此，以下代码在您的情况下工作正常：

CSS

<style>
    .state2-content {
         display:none;
    }
</style>

HTML

<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="-content">state 2</p>

脚本

<script>
  $(document).ready(function() {
    $(".grad-nav .swiper-slide").addClass(function (index) {
      return 'state' + (index + 1);
    });

    $(".grad-nav .swiper-slide").on('click', function() {
      var activeState = $(this).attr('class').split(' ')[1];
      $(".grad-nav .state-content").fadeOut(300);
      $("." + activeState + "-content").fadeIn(300);
    });
  });
</script>

$(document).ready(function() {
    $(".grad-nav .swiper-slide").addClass(function (index) {
      return 'state' + (index + 1);
    });

    $(".grad-nav .swiper-slide").on('click', function() {
      var activeState = $(this).attr('class').split(' ')[1];
      $(".grad-nav .state-content").fadeOut(300);
      $("." + activeState + "-content").fadeIn(300);
    });
  });

.state2-content {
        display:none;
    }

<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="state2-content">state 2</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>