¿Cómo mostrar contenido en un div según un dropdown-menu en bootstrap 4?

publicado por: Anonymous

¿Cómo le puedo hacer para mostrar contenido en un div según la opción que haya elegido?

Si elijo la opción de info2 que me muestra una información determinada a la opción que selecciono, igual que si elijo info3 me muestre otra información diferente y así sucesivamente

Este es mi código de dropdown

_x000D_

_x000D_

<div class="btn-group dropup" >_x000D_
_x000D_
    <button type="button" class="btn btn-primary">Copiar</button>_x000D_
_x000D_
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  >_x000D_
        <span class="sr-only">Toggle Dropdown</span>_x000D_
    </button>_x000D_
       _x000D_
    <div class="dropdown-menu">_x000D_
      _x000D_
          <h6 class="dropdown-header"> Información </h6>_x000D_
          <a class="dropdown-item"  >Info 1</a>_x000D_
          <a class="dropdown-item"  >Info 2</a>_x000D_
          <a class="dropdown-item"  >Info 3</a>_x000D_
          <a class="dropdown-item"  >Info 4</a>_x000D_
          <a class="dropdown-item"  >Info 5</a>_x000D_
          <a class="dropdown-item"  >Info 6</a>_x000D_
_x000D_
    </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Según tu código, asumo que estás trabajando con bootstrap 4.

Un dropdown es un conjunto de enlaces, no es como un combobox donde una opción se selecciona (fíjate que el botón “Copiar”, no cambia a menos que lo programes).

Como son enlaces, podemos agregarle un evento de click para mostrar y/o ocultar elementos, para ello he usado jQuery.

Fíjate que he agregado un atributo a cada enlace que es data-target que contendrá el selector del contenedor a mostrar, esto es para no agregarle un evento individual a cada enlace, en este caso estoy usando el id #info-n, con ello cuando le hace click, le quito la clase active a todos los elementos para que se oculte el actual y le agrego la clase active solo aldiv del data-target.

_x000D_

_x000D_

$('[data-target]').click(function() {_x000D_
  const target = $(this).data('target');_x000D_
  $('.info').removeClass('active');_x000D_
  $(target).addClass('active');_x000D_
});

_x000D_

.info {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
.info.active {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
_x000D_
/*Algunos estilos*/_x000D_
.infos {_x000D_
  display: inline-block;_x000D_
  background: #ddd;_x000D_
  padding: 10px;_x000D_
  width: 90px;_x000D_
  margin: 15px;_x000D_
  border: #666 solid 2px;_x000D_
  border-radius: 5px;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>_x000D_
_x000D_
<div class="btn-group">_x000D_
_x000D_
  <button type="button" class="btn btn-primary">Copiar</button>_x000D_
_x000D_
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">_x000D_
        <span class="sr-only">Toggle Dropdown</span>_x000D_
    </button>_x000D_
_x000D_
  <div class="dropdown-menu">_x000D_
_x000D_
    <h6 class="dropdown-header"> Información </h6>_x000D_
    <a class="dropdown-item" data-target="#info-1">Info 1</a>_x000D_
    <a class="dropdown-item" data-target="#info-2">Info 2</a>_x000D_
    <a class="dropdown-item" data-target="#info-3">Info 3</a>_x000D_
    <a class="dropdown-item" data-target="#info-4">Info 4</a>_x000D_
    <a class="dropdown-item" data-target="#info-5">Info 5</a>_x000D_
    <a class="dropdown-item" data-target="#info-6">Info 6</a>_x000D_
_x000D_
  </div>_x000D_
</div>_x000D_
<div class="infos">_x000D_
<div id="info-1" class="info active"> Info 1 </div>_x000D_
<div id="info-2" class="info"> Info 2 </div>_x000D_
<div id="info-3" class="info"> Info 3 </div>_x000D_
<div id="info-4" class="info"> Info 4 </div>_x000D_
<div id="info-5" class="info"> Info 5 </div>_x000D_
<div id="info-6" class="info"> Info 6 </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *