Tengo una página de encabezado a la que se accede desde otra página. En la página de encabezado, tengo un ícono de campana, al hacer clic en el ícono de campana, debería ir a una pestaña en otra página. Cómo lograr esto.
Código de página de encabezado:
<div class="notify id="notify"> <a href="/myAccount#message" class="not-bell"><i class="fa fa-bell"></i></a> </div>La página de mi cuenta contiene ciertas pestañas
<div class="nav-tabs-custom profile_tab" id="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#profile" data-toggle="tab" class="active show">Profile</a></li> <li><a href="#pass" data-toggle="tab">Password</a></li> <li><a href="/list" data-toggle="tab">My Listings</a></li> <li><a href="#message" data-toggle="tab" id="msg" >Message</a></li> </ul> <div class="tab-content"> <div class="active tab-pane" id="profile"> --- </div> <div class="tab-pane" id="pass"> --- </div> <div class="tab-pane" id="message"> --- </div> </div>Al hacer clic en el ícono de campana, la ruta debe ser la pestaña de mensajes de la página de mi cuenta. Pero la ruta muestra la pestaña de perfil.
Lo que muestra mi salida al hacer clic en el ícono de la campana es
Cómo pasar a la pestaña de mensajes, al hacer clic en el icono de campana.
Como puede ver en mi código a continuación, agrego data-contentabs y data-ultabs luego uso window.location.hash (en este ejemplo usé una variable simple porque estamos en iframe) y uso este valor para verificar si existe un div con ese valor y agregue la clase activa en eso.
const hash = 'message'; // In your live version ---> window.location.hash; if (hash) { let div = document.querySelector('[href*="' + hash + '"]'); let div2 = document.querySelector('#' + hash); if (div === null || div2 === null) { FirstHash(); } else { div.classList.add('active'); div2.classList.add('show'); div2.classList.add('active'); } } else { FirstHash(); } function FirstHash() { let div = document.querySelector('ul[data-ultabs] > li:first-child > a'); let div2 = document.querySelector('div[data-contentabs] > div:first-child'); if (div) { div.classList.add('active'); } if (div2) { div2.classList.add('show'); div2.classList.add('active'); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> <div class="nav-tabs-custom profile_tab" id="tabs"> <ul class="nav nav-tabs" data-ultabs> <li><a href="#profile" data-toggle="tab" class="active show">Profile</a></li> <li><a href="#pass" data-toggle="tab">Password</a></li> <li><a href="/list" data-toggle="tab">My Listings</a></li> <li><a href="#message" data-toggle="tab" id="msg">Message</a></li> </ul> <div class="tab-content" data-contentabs> <div class="tab-pane" id="profile"> <p>SECTION PROFILE</p> </div> <div class="tab-pane" id="pass"> <p>SECTION PASS</p> </div> <div class="tab-pane" id="message"> <p>SECTION MESSAGE</p> </div> </div> </div>Si edita el valor de hash con un valor vacío o incorrecto, verá que el script activará la primera pestaña.
PD. Claramente, este es un código básico, le sugiero que edite y cambie el nombre de la variable y coloque todo en una función