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
    Commented 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
    Commented 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
    Commented el 2 may. 2020 a las 14:49
  • Son quantro divs
    – everson
    Commented el 2 may. 2020 a las 14:50
  • son quatro. uno para cada etiqueta del menu.
    – everson
    Commented el 2 may. 2020 a las 15:13
  • Lo que edite arriba , hace unos minutos, es asi como lo estas buscando?
    – John
    Commented el 2 may. 2020 a las 15:17

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.