Граница рядом с текстом в активной вкладке не изменяется

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>

Answer 2

Удалить все active класс из .nav-link, кроме тех, на которые в данный момент нажали:

$('.nav-link').on('click', function(){
        $(this).addClass("active");
        $(".nav-link").not($(this)).removeClass("active");
});

$(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(){
        $(this).addClass("active");
        $(".nav-link").not($(this)).removeClass("active");
        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 3

В вашем JS измените код ниже.

    $(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').removeClass('active');
       $('.nav-link').removeClass('active');
       $('.tab-pane').hide();
      if($(this).hasClass('active')) {

         $(this).removeClass('active');
      }
       else{
        $(this).addClass('active');
        $(content_id).show();
      }

    });
});

Answer 4

это потому, что ваш код js вы должны добавить и удалить активный класс при нажатии функции:

$('.nav-link').on('click', function(){
         $('.nav-link').removeClass('active');
    $(this).addClass('active');
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });

Answer 5

Измените функцию щелчка следующим образом,

$('.nav-link').on('click', function() {
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
    var content_id = $(this).attr('href');
    $('.tab-pane').hide();
    $(content_id).show();
});