Lien externe vers onglet bootstrap 5

barpoi78
Javascript

Bonjour,

Je cherche à me rendre dans un onglet précis via un lien qui se situe sur une autre page mais j'arrive sur l'onglet qui se situe en premier:

Mon js:

    document.querySelector(document).ready(function () {
        document.querySelector("#lien").click(function () {
            document.querySelector('.nav-link a[href="#v-pills-profil"]').tab('show');           
        });
    });

    ou en jquery//

        $(document).ready(function () {
        $("#lien").click(function () {
            $('.nav-link a[href="#v-pills-profil"]').tab('show');           
        });
    });

Mon lien externe:

<a id="lien" href="{{ path('account') }}/#v-pills-profil" class="btn btnContact">Retour</a>

Ma navigation sur ma page onglet:

            <ul class="nav nav-pills">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#" id="home-tab" data-bs-toggle="tab" data-bs-target="#v-pills-accueil"><i class="me-1 fas fa-home"></i>Accueil</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#v-pills-profil"><i class="me-1 fas fa-user"></i>Profil</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#v-pills-commentaires"><i class="me-1 fas fa-comments"></i>Commentaires</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#v-pills-articles" href="#"><i class="me-1 fas fa-list"></i>Articles</a>
              </li>
            </ul>

Mon onglet:

<!-- PROFIL -->
<div class="mt-3 tab-pane fade" id="v-pills-profil" role="tabpanel" aria-labelledby="v-pills-profil-tab">
                    <div class="card border border-0">
                      <div class="card-header bg-white border border-0">
                          <h3>Votre profil</h3>
                      </div>
                      <div class="card-body bg-white border border-0">
                        {% for message in app.flashes('profile_message') %}
                          <div class="myAlert alert alert-success" role="alert">
                            {{ message }}
                          </div>
                        {% endfor %}
                          <div class="row row cols-2">
                            <div class="col-lg-1">Nom</div>
                            <div class="col-lg-3">{{ app.user.lastname }}</div>
                          </div>
                          <div class="row row cols-2">
                            <div class="col-lg-1">Prénom</div>
                            <div class="col-lg-3">{{ app.user.firstname }}</div>
                          </div>
                          <div class="row row cols-2">
                            <div class="col-lg-1">Email</div>
                            <div class="col-lg-3">{{ app.user.email }}</div>
                          </div>
                          <div class="row row cols-2 mt-3">
                            <div class="col-lg-3"><a class="text-primary" href="{{ path('user_profile_edit')}}">&Eacute;diter mon profil</a></div>
                            <div class="col-lg-2"><a class="text-primary" href="#">Modifier votre profil</a></div>
                          </div>
                      </div>
                    </div>
                  </div>

Je vous remercie de votre aide

Aucune réponse