0

me gustaria que me ayudaran porfavor No soy muy competente en JS y me gustaría ayudarme con un problema que tengo. Quiero hacer que las pestañas de un sitio web de Drupal giren automáticamente, pero aún así el usuario puede hacer clic en ellas. Este es el código que tengo hasta ahora , alguien que me ayude por favor: seque hay forma de realizar esta tarea deforma mas corta o una manera mas didactica.

    var index = 0, // Index of current tab
    interval = setInterval(function () { rotate(); }, 5000), // Interval
    $tabs = $('ul.checklist-select'),
    $content = $('.checklist_wrap');

// Click handler
$('ul.checklist-select>li>a').each(function (i) {
    $(this).click(function () {
        index = i;
        switchElement();
    });
});

function rotate() {
    // Update index to next one
    index++;

    // Check if this is a valid index, or reset to 0
    if (index >= $tabs.children('li>a').length)
        index = 0;

    switchElement();
}

function switchElement() {
    // Clear interval
    clearInterval(interval);

    // Remove class from current tab
    $('ul.checklist-select>li>a').removeClass('active');
    $('.checklist_wrap>div>div.box').fadeOut(300);

    // Show
    var $tab = $tabs.children('li>a').eq(index);
    $tab.addClass('active');
    $content.children('div>div.box').eq(index).delay(300).fadeIn(300);

    // Reset interval
    interval = setInterval(function () { rotate(); }, 5000);
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div id="checklist_wrap">
    <ul class="nav nav-tabs checklist-select" id="myTab" role="tablist">
        <li class="nav-item ">
            <a class="nav-link active cartelera" id="home-tab" data-toggle="tab" href="#cartelera" role="tab" aria-controls="cartelera" aria-selected="true"> cartelera</a>
        </li>

        <li class="nav-item">
            <a class="nav-link gallo" id="profile-tab" data-toggle="tab" href="#gallo" role="tab" aria-controls="gallo" aria-selected="false">gallo</a>
        </li>

        <li class="nav-item">
            <a class="nav-link calendario" id="contact-tab" data-toggle="tab" href="#calendario" role="tab" aria-controls="calendario" aria-selected="false">Calendario</a>
        </li>

        <li class="nav-item">
            <a class="nav-link galeria" id="contact-tab" data-toggle="tab" href="#galerias" role="tab" aria-controls="galerias" aria-selected="false">Galerias</a>
        </li>

        <li class="nav-item video">
            <a class="nav-link video" id="contact-tab" data-toggle="tab" href="#videos" role="tab" aria-controls="videos" aria-selected="false">Videos</a>
        </li>
    </ul>

    <div class="tab-content p-3 tabs-cartelera" id="myTabContent">
        <div class="tab-pane fade show active box" id="cartelera" role="tabpanel" aria-labelledby="home-tab">uno</div>

        <div class="tab-pane fade box" style="display: none;" id="gallo" role="tabpanel" aria-labelledby="profile-tab">dos</div>

        <div class="tab-pane fade box" style="display: none;" id="calendario" role="tabpanel" aria-labelledby="contact-tab">tres</div>

        <div class="tab-pane fade box" style="display: none;" id="galerias" role="tabpanel" aria-labelledby="contact-tab">cuatro</div>

        <div class="tab-pane fade box" style="display: none;" id="videos" role="tabpanel" aria-labelledby="contact-tab">5</div>
    </div>
</div>

probé algunas opciones pero no funcionaba. ¡Muchas gracias! Agradezco su tiempo y ayuda.

1
  • Las ediciones de las preguntas se hacen para que sean más legibles y textos como este me gustaria que me ayudaran porfavor No soy muy competente en JS y me gustaría ayudarme con un problema que tengo., saludos o agradecimientos no ayudan a plantear correctamente la pregunta, es mejor ir directamente al grano
    – Triby
    el 29 may. 2020 a las 0:38

1 respuesta 1

0

Funcionó con algunos pequeños cambios:

  • Obtener contenedores por ID y no por etiqueta.clase
  • En rotate solo cambié $tabs.children('li>a') por $tabs.find('a.nav-link') para obtener los enlaces disponibles
  • En switchElement es donde hubo más cambios y están comentados.

Básicamente, no funcionaba por la forma de obtener los elementos o por como intentabas modificarlo, además de que no actualizabas las clases correctamente.

var index = 0, // Index of current tab
    interval = setInterval(function () { rotate(); }, 5000), // Interval
    // Obtener ul y div por ID
    $tabs = $('#myTab'),
    $content = $('#myTabContent');

// Click handler
$('ul.checklist-select>li>a').each(function (i) {
    $(this).click(function () {
        index = i;
        switchElement();
    });
});

function rotate() {
    // Update index to next one
    index++;

    // Check if this is a valid index, or reset to 0
    // Verificar la cantidad de enlaces
    if (index >= $tabs.find('a.nav-link').length)
        index = 0;

    switchElement();
}

function switchElement() {
    // Clear interval
    clearInterval(interval);

    // Remove class from current tab
    $('ul.checklist-select>li>a').removeClass('active');
    // Eliminar clases que hacen visibles los div
    $content.children().removeClass('show active');
    $content.children().fadeOut(300);

    // Show
    // Buscar por enlace y seleccionar por índice
    var $tab = $tabs.find('a.nav-link')[index];
    $($tab).addClass('active');
    // Buscar por índice y agregar clase para hacerlo visible
    $($content.children()[index]).addClass('show active');
    $($content.children()[index]).fadeIn(300);

    // Reset interval
    interval = setInterval(function () { rotate(); }, 5000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div id="checklist_wrap">
    <ul class="nav nav-tabs checklist-select" id="myTab" role="tablist">
        <li class="nav-item ">
            <a class="nav-link active cartelera" id="home-tab" data-toggle="tab" href="#cartelera" role="tab" aria-controls="cartelera" aria-selected="true"> cartelera</a>
        </li>

        <li class="nav-item">
            <a class="nav-link gallo" id="profile-tab" data-toggle="tab" href="#gallo" role="tab" aria-controls="gallo" aria-selected="false">gallo</a>
        </li>

        <li class="nav-item">
            <a class="nav-link calendario" id="contact-tab" data-toggle="tab" href="#calendario" role="tab" aria-controls="calendario" aria-selected="false">Calendario</a>
        </li>

        <li class="nav-item">
            <a class="nav-link galeria" id="contact-tab" data-toggle="tab" href="#galerias" role="tab" aria-controls="galerias" aria-selected="false">Galerias</a>
        </li>

        <li class="nav-item video">
            <a class="nav-link video" id="contact-tab" data-toggle="tab" href="#videos" role="tab" aria-controls="videos" aria-selected="false">Videos</a>
        </li>
    </ul>

    <div class="tab-content p-3 tabs-cartelera" id="myTabContent">
        <div class="tab-pane fade show active box" id="cartelera" role="tabpanel" aria-labelledby="home-tab">uno</div>

        <div class="tab-pane fade box" style="display: none;" id="gallo" role="tabpanel" aria-labelledby="profile-tab">dos</div>

        <div class="tab-pane fade box" style="display: none;" id="calendario" role="tabpanel" aria-labelledby="contact-tab">tres</div>

        <div class="tab-pane fade box" style="display: none;" id="galerias" role="tabpanel" aria-labelledby="contact-tab">cuatro</div>

        <div class="tab-pane fade box" style="display: none;" id="videos" role="tabpanel" aria-labelledby="contact-tab">cinco</div>
    </div>
</div>

9
  • gracias pero me sale un error... el 29 may. 2020 a las 1:20
  • Cannot read property 'find' of undefined at rotate el 29 may. 2020 a las 1:20
  • y este $ is not defined at el 29 may. 2020 a las 1:20
  • en esta linea $tabs = $('#myTab'), $content = $('#myTabContent'); el 29 may. 2020 a las 1:25
  • Prueba actualizando tu versión de jQuery, es muy antigua (1.9.1)
    – Triby
    el 29 may. 2020 a las 14:33

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.