la ligne de bordure à côté du texte dans l'onglet actif n'est pas modifiée

Question

J'essaie d'afficher la ligne de bordure juste à côté de l'onglet si elle est cliquée ou de dire si elle est active. Je pourrais montrer la ligne à côté mais ça ne change pas. Je veux dire que si je clique sur un autre onglet, il ne s'affichera pas à côté de l'onglet actuellement sélectionné.

Voici comment j'ai fait

$(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>

html css twitter-bootstrap bootstrap-4

0

Serenity 7 nov. 2019 à 08:04

Answer 1

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

1

Sugumar K 7 nov. 2019 à 05:19

Answer 2

Dans votre JS, veuillez changer le code ci-dessous.

    $(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();
      }

    });
});

0

Varis 7 nov. 2019 à 05:31

Answer 3

son parce que votre code js vous devez ajouter et supprimer la classe active sur la fonction de clic:

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

0

Akshita Karetiya 7 nov. 2019 à 05:23

Answer 4

Modifiez la fonction de clic comme ceci,

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

0

naveen 7 nov. 2019 à 05:21

Answer 5

Supprimez toutes les active classes de .nav-link, sauf celles sur lesquelles vous cliquez actuellement:

$('.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>

0

Rk003 7 nov. 2019 à 05:33

la ligne de bordure à côté du texte dans l'onglet actif n'est pas modifiée

5 réponses

De nouvelles questions

html