Skip to main content
He colocado algo de mi ejemplo real
Origen Enlace
Jose M Herrera V
  • 1.1k
  • 1
  • 9
  • 29

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>

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>

Origen Enlace
Jose M Herrera V
  • 1.1k
  • 1
  • 9
  • 29

Activar y desactivar class active en dropdown-item

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>