1

Mi código tiene dos elementos div. El segundo muestra una lista no numerada horizontal, con cuatro opciones.

Al elegir una de las opciones disponibles, el primer div muestra el contenido correspondiente a la opción dada.

Disparo código:

<div id="testimonial-slider" class="flexslider animate-this fadeInUp animated" style="height: 229px;">
   <ul class="slides">
      <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
         <p class="author-info"> Sencillez</p>
         <p>“Estamos especializados en el mantenimiento online de cuentas bancarias, mediante tecnología digital. Aquí no encontrarás productos toxicos ni rendimientos de capital extraños. En cambio, sí encontrarás: impresión de cuentas, préstamos e hipotecas
            pensadas para la gente de hoy… hasta un total de 11 productos de inversión.”
         </p>
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
         <p class="author-info"> Facilidad</p>
         <p>“En Charlybank obtienes tus productos inmediatamente, sin esperas. El cálculo de las operaciones se realiza al instante, en el mismo momento en que introduces tus datos y las especificaciones del producto que contrates. Una vez que elijas, el proceso
            es sencillo y claro. En unos pocos clics estaremos trabajando en tu producto y en pocas horas recibirás en tu correo la activación.”
         </p>
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide">
         <p class="author-info"> Economia</p>
         <p>“Somos un banco online preocupado por la economia: disponemos de la infraestructura más avanzada del mercado, lo cual, unido a la estandarización de nuestros productos, nos permite ofrecer rendimientos altamente competitivos.”</p>
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
         <p class="author-info"> Calidad</p>
         <p>“La calidad es el resultado de la experiencia, la pasión que ponemos en nuestro trabajo y los recursos que hemos puesto al servicio de nuestros clientes. Aunque somos un banco online "joven", los miembros del equipo técnico contamos con una dilatada
            experiencia en los sectores de la banca y de la informática. Los productos bancarios que ofrecemos, y que son de última generación, eatán en manos de expertos apasionados por su trabajo, y garantizan un resultado óptimo en el resultado económico
            de los clientes.”
         </p>
      </li>
   </ul>
</div>
<div class="flexslider-controls animate-this fadeInUp animated">
   <ul class="flex-control-nav">
      <li class="flex-active">Sencillez</li>
      |
      <li class="flex-active">Facilidad</li>
      |
      <li class="flex-active">Economia</li>
      |
      <li class="flex-active">Calidad</li>
   </ul>
</div>

La cuestión se halla en que siempre sale la misma opción y al elegir otra de la lista, no se altera el div de arriba.

8
  • 3
    Cual es tu pregunta?
    – alanfcm
    Commented el 19 jun. 2019 a las 14:42
  • tenias razon ya lo he editado Commented el 19 jun. 2019 a las 14:46
  • en la pagina web al probarla en localhost, las opciones del div de abajo funcionan como hipervínculos, cosa que aquí no sale Commented el 19 jun. 2019 a las 14:50
  • 1
    Para lograr lo que quieres es necesario algo de código Javascript, añádelo a la pregunta por favor. Commented el 19 jun. 2019 a las 14:51
  • 1
    ¿Que tipo de plantilla? ¿Que usa? Parece que hace uso de algun framework pero sin saberlo es imposible que lo adivinemos.
    – JDev
    Commented el 19 jun. 2019 a las 14:55

2 respuestas 2

1

Dime si estoy en lo correcto lo que quieres es que al hacer click en cada item te aparezca el texto correcto, aquí te pongo un ejemplo

la funcion myfunction() es lo que ayuda a desaparecer cada texto al momento de hacer click en cada item

function myFunction(nombre) {
      if(nombre == "li1"){
        document.getElementById('li1').style.opacity='1';
        document.getElementById('li2').style.opacity='0';
        document.getElementById('li3').style.opacity='0';
        document.getElementById('li4').style.opacity='0';
      }
      if(nombre == "li2"){
        document.getElementById('li1').style.opacity='0';
        document.getElementById('li2').style.opacity='1';
        document.getElementById('li3').style.opacity='0';
        document.getElementById('li4').style.opacity='0';
      }
      if(nombre == "li3"){
        document.getElementById('li1').style.opacity='0';
        document.getElementById('li2').style.opacity='0';
        document.getElementById('li3').style.opacity='1';
        document.getElementById('li4').style.opacity='0';
      }
      if(nombre == "li4"){
        document.getElementById('li1').style.opacity='0';
        document.getElementById('li2').style.opacity='0';
        document.getElementById('li3').style.opacity='0';
        document.getElementById('li4').style.opacity='1';
      }
      
    }
<div id="testimonial-slider" class="flexslider animate-this fadeInUp animated" style="height: 229px;">
          <ul class="slides">	
            <li id="li1" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1" class="flex-active-slide"><p class="author-info"> Sencillez</p>
              <p>“Estamos especializados en el mantenimiento online de cuentas bancarias, mediante tecnología digital. Aquí no encontrarás productos toxicos ni rendimientos de capital extraños. En cambio, sí encontrarás: impresión de cuentas, préstamos e hipotecas pensadas para la gente de hoy… hasta un total de 11 productos de inversión.”</p>
            </li>						
            <li id="li2" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide"><p class="author-info"> Facilidad</p>
              <p>“En Charlybank obtienes tus productos inmediatamente, sin esperas. El cálculo de las operaciones se realiza al instante, en el mismo momento en que introduces tus datos y las especificaciones del producto que contrates. Una vez que elijas, el proceso es sencillo y claro. En unos pocos clics estaremos trabajando en tu producto y en pocas horas recibirás en tu correo la activación.”</p>
            </li>						
            <li id="li3" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 1;" class="flex-active-slide"><p class="author-info"> Economia</p>
              <p>“Somos un banco online preocupado por la economia: disponemos de la infraestructura más avanzada del mercado, lo cual, unido a la estandarización de nuestros productos, nos permite ofrecer rendimientos altamente competitivos.”</p>
            </li>
                <li id="li4" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide"><p class="author-info"> Calidad</p>
              <p>“La calidad es el resultado de la experiencia, la pasión que ponemos en nuestro trabajo y los recursos que hemos puesto al servicio de nuestros clientes. Aunque somos un banco online "joven", los miembros del equipo técnico contamos con una dilatada experiencia en los sectores de la banca y de la informática. Los productos bancarios que ofrecemos, y que son de última generación, eatán en manos de expertos apasionados por su trabajo, y garantizan un resultado óptimo en el resultado económico de los clientes.”</p>
            </li>
          </ul>
        </div>
        <div class="flexslider-controls animate-this fadeInUp animated">
          <ul class="flex-control-nav">
            <li class="flex-active" onclick="myFunction('li1')">Sencillez</li> |
            <li class="flex-active" onclick="myFunction('li2')">Facilidad</li> |
            <li class="flex-active" onclick="myFunction('li3')">Economia</li> |
            <li class="flex-active" onclick="myFunction('li4')">Calidad</li>
            </ul>
        </div>

2
  • Muchas gracias Edison, es eso, pero yo pensaba que se podía hacer con el poco js que hay en el archivo adjunto Commented el 19 jun. 2019 a las 15:09
  • 1
    El código Javascript se hace muy repetitivo y es poco dinámico, te sugiero revisarlo y mejorar su formato.
    – user128841
    Commented el 23 jun. 2019 a las 14:35
1

Antes de nada, he modificado tu código debido a la cantidad de redundancias que albergaba, mejorando la accesibilidad, estandarización y dinamicidad.

He creado una sencilla función llamada show() que muestra un testimonio dependiendo de qué ítem se elija de la lista de opciones.

La función select() simplemente acorta el código, haciendo el código más visual y fácil.

Si te das cuenta, el código HTML se ha podido hacer más sencillo siguiendo la estructura semántica y lógica.

function show(int)
{
  var section, div;
  // Selecciona el primer elemento 'section'
  section = document.getElementsByTagName('section')[0];
  // Selecciona el primer 'div' dentro del primer 'section'
  div = section.getElementsByTagName('div')[0];
  
  function select(int, dis)
  {
    div.getElementsByTagName('li')[0].style.display = 'none';
    div.getElementsByTagName('li')[1].style.display = 'none';
    div.getElementsByTagName('li')[2].style.display = 'none';
    div.getElementsByTagName('li')[3].style.display = 'none';
    
    return div.getElementsByTagName('li')[int].style.display = dis;
  }
  
  // Oculta los ítems de la lista desordenada
  select(0, 'none');
  select(1, 'none');
  select(2, 'none');
  select(3, 'none');
  // Establece el primer ítem por defecto para ser mostrado
  select(0, 'list-item');
  
  // Mostrará un testimonio dependiendo de cual sea elegido
  if(int === 0) select(0, 'list-item');
  if(int === 1) select(1, 'list-item');
  if(int === 2) select(2, 'list-item');
  if(int === 3) select(3, 'list-item');
}

show();
html, body
{
  height: 100%;
}

body
{
  align-items: center;
  color: #fff;
  display: flex;
  font-family: 'Lucida Grande';
  justify-content: center;
  margin: 0;
}

section
{
  background-color: #787aff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 1em;
  width: 75%;
}

h1
{
  font-size: 1em;
  margin: 0 0 1em;
}

div:first-of-type ul li
{
  color: #ffe620;
}

div:last-of-type ul
{
  margin-top: 1em;
}

div:first-of-type li::before
{
  color: #fff;
  content: '“';
}

div:first-of-type li::after
{
  color: #fff;
  content: '”';
}

ul
{
  margin: 0;
}

a
{
  color: #04de71;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}
<body>
  <section>
    <h1>Testimonios</h1>
    <div>
      <ul>
        <li>Estamos [...] productos de inversión.</li>
        <li>En Charlybank [...] correo la activación.</li>
        <li>Somos un [...] altamente competitivos.</li>
        <li>La calidad [...] los clientes.</li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#" onclick="show(0)">Sencillez</a></li>
        <li><a href="#" onclick="show(1)">Facilidad</a></li>
        <li><a href="#" onclick="show(2)">Economía</a></li>
        <li><a href="#" onclick="show(3)">Calidad</a></li>
      </ul>
    </div>
  </section>
</body>

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.