1

estoy usando Bootstrap 4 en un proyecto y requiero hacer que se active la class= active de un dropdown-menu que tengo funcionando.

requiero el codigo javascript que permita teniendo esto:

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item" href="#">Regular2 link</a>
  <a class="dropdown-item" href="#">Regular3 link</a>
</div>

Si doy click al link Regular link entonces suceda:

<div class="dropdown-menu">
  <a class="dropdown-item active" href="#">Regular link</a>
  <a class="dropdown-item" href="#">Regular2 link</a>
  <a class="dropdown-item" href="#">Regular3 link</a>
</div>

Pero que al dar click al link Regular2 link entonces suceda:

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Regular2 link</a>
  <a class="dropdown-item" href="#">Regular3 link</a>
</div>

lo que tengo en mi ejemplo real es algo asi:

function videos(a){
window.scrollTo(0, 0);

$('li a').click(function(e) {
      //e.preventDefault();
      var $this = $(this);
      $this.closest('ul').find('li.active,a.active').removeClass('active');
      $this.addClass('active');
      $this.parent().addClass('active');

  });
  
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="botonera"><nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #c9deff;"><div class="container"><a onclick="bienvenida();" title="Cargar Inicio" class="navbar-brand" href="#Bienvenida"><img src="https://pbs.twimg.com/profile_images/825246668039868416/xGkCNLuh_400x400.jpg" width="180" height="30" alt="J.E SUMINISTROS Y MAS, C.A." longdesc="LOGO J.E SUMINISTROS Y MAS, C.A." id="logo" align="left"> </a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav"><li class="nav-item"><a onclick="bienvenida();" title="Cargar Inicio" class="nav-link active" href="#Bienvenida"><i class="fas fa-home fa-fw"></i> Inicio<span class="sr-only">(current)</span></a></li><li id="dropdown-secciones" class="nav-item dropdown"><a title="Secciones" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-puzzle-piece fa-fw"></i>  Secciones</a><div id="dropdown-secci" class="dropdown-menu" aria-labelledby="navbarDropdown"><a onclick="videos(1);" name="Videos_Seccion_1" title="Videos" href="#Videos_Seccion_1" class="dropdown-item">01 Videos Bienvenida  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(2);" name="Videos_Seccion_2" title="Videos" href="#Videos_Seccion_2" class="dropdown-item">02 Videos Entorno de Aprendizaje  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> <i title="Contiene Archivos Comprimido" class="fas fa-file-archive"></i> </a><a onclick="videos(3);" name="Videos_Seccion_3" title="Videos" href="#Videos_Seccion_3" class="dropdown-item">03 Videos Introduccion Informal  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> <i title="Contiene Archivos Comprimido" class="fas fa-file-archive"></i> </a><a onclick="videos(4);" name="Videos_Seccion_4" title="Videos" href="#Videos_Seccion_4" class="dropdown-item">04 Videos Operadores y Expresiones  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(5);" name="Videos_Seccion_5" title="Videos" href="#Videos_Seccion_5" class="dropdown-item">05 Videos Controlando el flujo  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(6);" name="Videos_Seccion_6" title="Videos" href="#Videos_Seccion_6" class="dropdown-item">06 Videos Colecciones de datos  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(7);" name="Videos_Seccion_7" title="Videos" href="#Videos_Seccion_7" class="dropdown-item">07 Videos Entradas y salidas de datos  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(8);" name="Videos_Seccion_8" title="Videos" href="#Videos_Seccion_8" class="dropdown-item">08 Videos Programacion de funciones  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(9);" name="Videos_Seccion_9" title="Videos" href="#Videos_Seccion_9" class="dropdown-item">09 Videos Manejo de excepciones  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(10);" name="Videos_Seccion_10" title="Videos" href="#Videos_Seccion_10" class="dropdown-item">10 Videos Clases y objetos  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(11);" name="Videos_Seccion_11" title="Videos" href="#Videos_Seccion_11" class="dropdown-item">11 Videos Herencia  <i title="Contiene Videos" class="fas fa-file-video"></i> <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(12);" name="Videos_Seccion_12" title="Videos" href="#Videos_Seccion_12" class="dropdown-item">12 Videos Metodos de las colecciones  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(13);" name="Videos_Seccion_13" title="Videos" href="#Videos_Seccion_13" class="dropdown-item">13 Videos Modulos y paquetes  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(14);" name="Videos_Seccion_14" title="Videos" href="#Videos_Seccion_14" class="dropdown-item">14 Videos Manejo de ficheros  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(15);" name="Videos_Seccion_15" title="Videos" href="#Videos_Seccion_15" class="dropdown-item">15 Videos Interfaces graficas con Tkinter  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(16);" name="Videos_Seccion_16" title="Videos" href="#Videos_Seccion_16" class="dropdown-item">16 Videos Bases de datos con SQLite  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(17);" name="Videos_Seccion_17" title="Videos" href="#Videos_Seccion_17" class="dropdown-item">17 Videos Funcionalidades avanzadas  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(18);" name="Videos_Seccion_18" title="Videos" href="#Videos_Seccion_18" class="dropdown-item">18 Videos Documentacion y pruebas  <i title="Contiene Videos" class="fas fa-file-video"></i> </a><a onclick="videos(19);" name="Videos_Seccion_19" title="Videos" href="#Videos_Seccion_19" class="dropdown-item">19 Videos Distribucion  <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(20);" name="Videos_Seccion_20" title="Videos" href="#Videos_Seccion_20" class="dropdown-item">20 Videos Anexos  <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="videos(21);" name="Videos_Seccion_21" title="Videos" href="#Videos_Seccion_21" class="dropdown-item">21 Videos Bonus  <i title="Contiene Archivos Web" class="fab fa-html5"></i> </a><a onclick="glosario();" title="Glosario de Terminos" name="Glosario de Terminos" href="#glosario" class="dropdown-item">Glosario de Terminos <span class="glyphicon glyphicon-book" aria-hidden="true"> </span>  <i title="Podra Imprimir" class="fas fa-print"></i> </a></div></li><li><a href="#extra" title="Ver Extensiones Instaladas" name="Extensiones" onclick="extra();" class="nav-link"> Extensiones   <i title="Consulte Extensiones" class="fas fa-folder-plus"></i> </a></li><li><a href="#Creditos" onclick="creditos();" title="Creditos" name="Creditos" class="nav-link">Creditos  <i title="Cargar Inicio" class="fas fa-file-alt"></i> </a></li></ul></div></div></nav></div>

4
  • Es decir en el evento click agregar esa clase al elemento?, nos muestras que llevas al momento por favor
    – user128299
    Commented el 6 sept. 2020 a las 15:14
  • He colocado algo de mi ejemplo real.. logicamente he suprimido el codigo porque lo que me ocupa es solo implementar el agregar o quitar la class active a los item a los que hacen click Commented el 6 sept. 2020 a las 15:36
  • de manera temporal he implementado el siguiente codigo que me funciona $('li a').click(function(e) { //e.preventDefault(); $('a').removeClass('active'); $(this).addClass('active'); }); Commented el 6 sept. 2020 a las 15:57
  • Dos detalles: 1. En el código que muestras debes crear la referencia a jQuery antes de la referencia a Bootstrap. 2. para no afectar todos los elementos 'a' asigna una clase a cada familia de anchors vinculados de modo que haces $('.familia').each( function(){ if($(this).hasClass('active'){ $( this ).removeClass('active'); } });
    – quevedo
    Commented el 7 sept. 2020 a las 0:10

1 respuesta 1

2

Primero debes evitar que el enlace recargue la página, con .preventDefault();, luego solo es agregar y quitar a sus hermanos la clase .active con .clik();

$('.dropdown-menu a').click(function(e){
  e.preventDefault();
  $(this).addClass('active');
  $(this).siblings().removeClass('active');;
});
.active {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item" href="#">Regular2 link</a>
  <a class="dropdown-item" href="#">Regular3 link</a>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.