html - 事件选项卡中文本旁边的边框线未更改

Question

如果单击它或说它是否处于事件状态，我试图在选项卡的一侧显示边框线。我可以显示它旁边的线，但它不会改变。我的意思是，如果我单击其他选项卡，它不会显示在当前选定的选项卡旁边。

这是我的做法

$(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });
   
    $('.nav-link').on('click', function(){
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });
});

.child {
  padding-left: 60px; 
  padding-right:100px
}

a.nav-link span {
  position: relative;
}

a.nav-link.active span:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 5px;
    border-bottom: 4px solid #e64a19;
    top: 8px;
    left: -35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="teams" class="tabbable tabs-left">
    <div class="container">
        <div class="row">
            <nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab"><span>Category1</span></a>
                <a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab"><span>Category2</span></a>
                <a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab"><span>Category3</span></a>
            </nav>
            <div class="tab-content col-md-11">
                <div class="tab-pane child active" id="category1-tab">
                    <h5 class="card-title">Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category2-tab">
                    <h5 class="card-title">Category 2 Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category3-tab">
                    <h5 class="card-title">Category 3 Name</h5>
                    <p class="card-title">position</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

<script>
    $(document).ready(function() {
        $('.nav.teamTab').on('click', 'a', function() {
        $('.nav.teamTab a.active').removeClass('active');
        $(this).addClass('active');
     });
    });
</script>