javascript - mostrar - innerhtml

Navegando por diferentes contenidos en un diálogo jQuery sin usar pestañas

Question

Estoy creando un cuadro de diálogo de jQuery UI, con 3 botones, de modo que pueda mostrar diferentes contenidos en el cuadro de diálogo de acuerdo con los diferentes botones en los que he hecho clic.

Y antes de eso, he establecido tres botones para activar el cuadro de diálogo.

es decir. - Inicialmente tengo 3 botones - haga clic en cualquiera de ellos para abrir una ventana emergente de diálogo - al hacer clic en el botón 1, el botón 1 en el cuadro de diálogo aparecerá en negrita y se mostrará el contenido 1. y puedo cambiar libremente de contenido haciendo clic en los botones en el cuadro de diálogo; el botón respectivo estará en negrita y se mostrará el contenido respectivo de acuerdo con el botón inicial que hago clic en

Y he creado una demostración para ella (sin estilo de CSS ya que son demasiado complicados de incluir, lo siento) >>>>>> JSFiddle

    $(document).ready(function(){
    $(''#helpDialogPop'').dialog({
        autoOpen:false,
        modal: true
    }).dialog("widget")
        .next(".ui-widget-overlay")
        .css("background", "black")
        .css("opacity","0.9");
    $(''#pop1'').click(function(){ $(''#helpDialogPop'').dialog(''open''); });
    $(''#pop2'').click(function(){ $(''#helpDialogPop'').dialog(''open''); });
    $(''#pop3'').click(function(){ $(''#helpDialogPop'').dialog(''open''); });
});

En realidad, he hecho preguntas similares antes y alguien me sugirió que use la pestaña, pero eventualmente usar pestañas no puede tener el efecto que quiero. Entonces estoy usando el enfoque actual para hacerlo.

Y puedo mostrar con éxito el contenido para el botón 1, pero no sé cómo definir el contenido en tres botones separados para que no aparezcan juntos en la primera página de contenido.

Una cosa más es que no estoy seguro de si debo usar un div o algunas páginas html separadas para contener el contenido que se mostrará.

¿Alguien podría darme algunos consejos y direcciones por favor, gracias?

Answer 1

Crea 3 div diferentes para los 3 botones diferentes. No se requiere html.

$(document).ready(function() {
  $(''li:first-child, #i1'').click(function() {
    $(''#main button'').css({
      ''display'': ''inline-block''
    });
    $(''#i1'').addClass("active");
    $(''#i3,#i2'').removeClass("active");
    $(''#info1'').css({
      ''display'': ''block''
    });
    $(''#info2,#info3'').css({
      ''display'': ''none''
    });
  })

  $(''li:nth-child(2), #i2'').click(function() {
    $(''#main button'').show();
    $(''#i2'').addClass("active");
    $(''#i1,#i3'').removeClass("active");
    $(''#info2'').css({
      ''display'': ''block''
    });
    $(''#info1,#info3'').css({
      ''display'': ''none''
    });
  })
  $(''li:nth-child(3), #i3'').click(function() {
    $(''#main button'').show();
    $(''#i3'').addClass("active");
    $(''#i1,#i2'').removeClass("active");
    $(''#info3'').css({
      ''display'': ''block''
    });
    $(''#info2,#info1'').css({
      ''display'': ''none''
    });
  });

});

#info1,
#info2,
#info3 {
  display: none;
  position: absolute;
  top: 70px;
  background: #454545;
  width: 300px;
  height: 500px;
  color: white;
}
.active {
  background: green;
}
ul li {
  display: inline-block;
  list-style-type: none;
  background: lightblue;
  border: 1px solid black;
}
button {
  display: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>1nfo</li>
    <li>info2</li>
    <li>info3</li>
  </ul>

  <button id="i1">info1</button>
  <button id="i2">info2</button>
  <button id="i3">info3</button>
  <div id="info1">description of info1</div>
  <div id="info2">description of info2</div>
  <div id="info3">description of info3</div>
</div>