0

necesito ayuda con esta función que no me esta apresentado ningun resultado. tengo un menu dentro de un modal que al hacer click en una de las opciones me muestra la div correspondiente dentro del modal. Ya he intentado con javascript pero tambien sin conseguir el resultados esperado.

$(function(){
    $('#Ultimasvendas').click(function(){

        var conteudo = $(this).parent().find('.conteudo');

        if(!conteudo.hasclass('show')){

            $('.grafico').find('.show').slideUp('fast', function(){
                $(this).addclass('hide').removeclass('show');
            });

            conteudo.slideDown('fast', function(){
                $(this).addclass('show').removeclass('hide');

            });

        }
    });
});




<nav class="menu">
  <ul>
     <li>
         <a href="#" id="Ultimasvendas">
            <i class="fas fa-tasks fa-2x " ></i> <br>Ultimas vendas
         </a>
     </li>
     <li>
         <a href="#"  id="Maisvendidas">
            <i class="fas fa-plus fa-2x " ></i> <br>Mais vendidas
         </a>
     </li>
     <li>
         <a href="#" id="Cancelamentos">
            <i class="fas fa-window-close fa-2x " ></i> Cancelamentos
         </a>
     </li>
     <li>
         <a href="#" id="Aconfirmar">
            <i class="fas fa-pause-circle fa-2x " ></i><br> A confirmar
         </a>
     </li>

  </ul>

El código de las divs a seguir se repita para cada etiqueta del menu

        <style type="text/css">
          .grafico .hide{
            display: none;
          }
        </style>
        <div class="col-md-12 grafico"  >
            <div class="row" >
                    <h1> Table 1</h1>
                </div><!--grafico 1-->

1
  • ¿Puedes subir tambien? , el código del menu para ver si hay algún error en esa parte
    – John
    el 2 may. 2020 a las 14:14

1 respuesta 1

0

me dijiste que querias que los div se mostraran y que mediante botón entonces mostraran los demas div y ocultaran las anteriores, no se si esto te pueda ayudar

<div class="IFR">
			<div  id="option-primera">
				<div>
					<p>INFORMACION 1</p>
				</div>
			</div>

			<div id="option-segunda" style="display: none;" >
				<div>
					<p>informacion 2</p>
				</div>
			</div>

			<div id="option-tercera"  style="display: none;" >
				<div>
				<p>informacion 3</p>
				</div>
			</div>

			<div id="option-cuarta"  style="display: none;" >
				<div>
				<p>informacion 4</p>
				</div>
			</div>

		</div>


	<div class="option">
			<button  id="btn-option-1">Option 1</button>
			<button  id="btn-option-2">Option 2</button>
			<button	 id="btn-option-3">Option 3</button>
			<button	 id="btn-option-4">Option 4</button>
		</div>



<script>


	  let btn1 = document.getElementById('btn-option-1');
      let opt1 = document.getElementById('option-primera');
      let btn2 = document.getElementById('btn-option-2');
      let opt2 = document.getElementById('option-segunda');
      let btn3 = document.getElementById('btn-option-3');
      let opt3 = document.getElementById('option-tercera');
      let btn4 = document.getElementById('btn-option-4');
      let opt4 = document.getElementById('option-cuarta');


      btn2.addEventListener('click', function () {

          if (opt2.style.display === 'block'){



          }else{

              opt2.style.display = 'block';
              opt1.style.display = 'none';
              opt3.style.display = 'none';
              opt4.style.display = 'none'
          }

      }, false);


      btn1.addEventListener('click', function () {

          if (opt1.style.display === 'block'){



          }else{

              opt1.style.display = 'block';
              opt2.style.display = 'none';
              opt3.style.display = 'none';
              opt4.style.display = 'none'

          }


      }, false);


      btn3.addEventListener('click', function () {

          if (opt3.style.display === "block"){

          }else{

              opt3.style.display = 'block';
              opt2.style.display = 'none';
              opt1.style.display = 'none';
              opt4.style.display = 'none';

          }


      });

      btn4.addEventListener('click', function () {

          if (opt4.style.display === "block"){

          }else{

              opt4.style.display = 'block'
              opt3.style.display = 'none';
              opt2.style.display = 'none';
              opt1.style.display = 'none';

          }


      });


</script>

7
  • Gracias por tu ayuda amigo, pero en mi caso quiero que al hacer click en otro boton la primera div se oculta y mestra la siguiente.
    – everson
    el 2 may. 2020 a las 14:43
  • solo para informarme cuantos div, pondrás , en el siguiente ejemplo creo que tendré la solución a como me estas diciendo
    – John
    el 2 may. 2020 a las 14:49
  • Son quantro divs
    – everson
    el 2 may. 2020 a las 14:50
  • son quatro. uno para cada etiqueta del menu.
    – everson
    el 2 may. 2020 a las 15:13
  • Lo que edite arriba , hace unos minutos, es asi como lo estas buscando?
    – John
    el 2 may. 2020 a las 15:17

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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