选项卡的onclick选项卡内容不完全可见（jquery）

Question

标签的

onclick标签内容仅加载一半。尽管活动标签的颜色正在更改。但是，即使标题也看不到内容。下面是我尝试过的。请告诉我我要去哪里了。代码中提到的高度是我的原型所必需的，我无法更改。 预先感谢

$(function() {
  $("#tabs").tabs();
});

$(document).ready(function() {
  $('#tabs li a:first').addClass('active');
  $('.sticky > .u-tabs > li >a').click(function() {
    alert("01");

    var t = $(this).attr('data-toggle-id');
    //this is the start of our condition 
    if (!$(this).hasClass('active')) { 
      $('#tabs li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});

.maintab ul.u-tabs li {
  display: inline-block;
}

.maintab ul.u-tabs li a {
  opacity: 0.87;
  display: inline-block;
  padding: 10px;
  color: red;
  font-size: 14px;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: #38506d;
}

.maintab ul.u-tabs li a.active {
  color: #ccc;
  border-bottom: 4px solid red;
}

.header {
  font-size: 14px;
  color: red;
  font-weight: bold;
}

div.sticky {
  position: sticky;
  top: 0;
  padding: 40px;
  font-size: 20px;
  z-index: 1;
  background-color: #fff;
  border-bottom: 1px solid #979797;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maintab  " id="tabs">
  <div class="sticky" class="">
    <ul class="u-tabs tabs">
      <li><a href="#tabone" class="titleactive">TABONE</a></li>
      <li><a href="#tabtwo" class="">TABTWO</a></li>
      <li><a href="#tabthree" class="">TABTHREE</a></li>
    </ul>
  </div>
  <div class="tabcontent">
    <div class="panel" style="height:350px;border:1px solid #ccc;margin-top:45px;" id="tabone">
      <div class="header">tabone_content</div>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <input type="submit" value="Submit">

    </div>
    <div class="panel " style="height:330px;border:1px solid #ccc;margin-top:45px;" id="tabtwo">
      <div class="header">tabtwo_content</div>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
    </div>
    <div class="panel " style="height:410px; border:1px solid #ccc;margin-top:45px;" id="tabthree">
      <div class="header">tabthree_content</div>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
    </div>

  </div>
</div>