レスポンシブなタブメニュー CSS&JS -Tab UI

<ul class="tab-menu">
        <li class="active"><a href="#content-1" id="tab-1">タブ1</a></li>
        <li><a href="#content-2" id="tab-2">タブ2</a></li>
        <li><a href="#content-3" id="tab-3">タブ3</a></li>
      </ul>
      <div class="tab-content active" id="content-1">
        <p>タブ1のコンテンツ</p>
      </div>
      <div class="tab-content" id="content-2">
        <p>タブ2のコンテンツ</p>
      </div>
      <div class="tab-content" id="content-3">
        <p>タブ3のコンテンツ</p>
      </div>

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

<script type="text/javascript">
  $(document).ready(function() {
    // URLのハッシュを取得
    var hash = window.location.hash;
  
    // ハッシュが空でない場合、該当するタブをアクティブにする
    if (hash !== '') {
      $('.tab-menu li').removeClass('active');
      $('a[href="' + hash + '"]').parent().addClass('active');
      $('.tab-content').removeClass('active');
      $(hash).addClass('active');
  
      // ウィンドウのスクロール位置を調整
      var tabMenuHeight = $('.tab-menu').outerHeight();
      var targetOffset = $(hash).offset().top;
      var adjustedOffset = targetOffset - tabMenuHeight;
      $('html, body').scrollTop(adjustedOffset);
    }
  
    // タブがクリックされたらコンテンツを表示
    $('.tab-menu a').on('click', function(e) {
      e.preventDefault();
      $('.tab-menu li').removeClass('active');
      $(this).parent().addClass('active');
      var target = $(this).attr('href');
      $('.tab-content').removeClass('active');
      if (target.indexOf('tab-') !== -1) {
        $('#' + target).addClass('active');
      } else {
        $(target).addClass('active');
      }
    });
  });
</script>

<div class="tab-container" id="tab-container1">
          <ul class="tab" id="tab-container1-nav">
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
            <li><a href="#tab4">Tab 4</a></li>
          </ul>
          <div class="tab-content" id="tab1">
            <h3>タブ1　コンテンツ</h3>
            
          </div>
          <div class="tab-content" id="tab2">
            <h3>タブ2　コンテンツ</h3>
            
          </div>
          <div class="tab-content" id="tab3">
            <h3>タブ3　コンテンツ</h3>
            
          </div>
          <div class="tab-content" id="tab4">
            <h3>タブ4　コンテンツ</h3>
            
          </div>
        </div>