1

En una pagina tengo una función reemplaza el estado active con js lo cual despliega el contenido del tab, el problema es cuando un presiona el link la pantalla se posiciona donde se encuentra el elemento, como puedo evitar el movimiento de pantalla al realizar click en el tab, esto se realiza en n cantidad de tabs con diferente contenido
las funciones cambian el leyendo encontrando coincidencias a partir de la 4 letra, luego se realiza un clear para evitar la repeticion de datos al momento de desplegar el contenido de otro tab

 <a href="#tab_primero_1" data-tab="tab_primero_1" class="b-nav-tab">
                    card
                  </a>
                <div id="tab_primero_1" class="b-tab">
                <div class="swiper mySwiper container">
                    <div class="swiper-wrapper content">

                        <div class="swiper-slide card" data-filter="Disney+Youtube">
                        <div class="card-content">
                          <div class="image">
                            <img src=".png" alt="" />
                          </div>
                          <div class="name-contenido">
                            
                          </div>
                          <div class="button">
                            <button onclick="seleccionar('75disyou')">
                              Comprar
                            </button>
                          </div>
                        </div>
                      </div>
              
                      <div class="swiper-slide card" data-filter="52">
                        <div class="card-content">
                          <div class="image">
                            <img src=".png" alt="" />
                          </div>
                          <div class="name-contenido">
                            
                          </div>
                          <div class="button">
                            <button onclick="seleccionar()">
                              Comprar
                            </button>
                          </div>
                        </div>
                      </div>
                      

                   </div>
                   <div class="swiper-button-next"></div>
                   <div class="swiper-button-prev"></div>
                   <div class="swiper-pagination"></div>
                 </div>
                 
                 
               </div>
              <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

          
              <!-- Initialize Swiper -->
              <script>
                  /*===============Categories function========*/
                  'use strict';

                            function Tabs() {
                              var bindAll = function() {
                                var menuElements = document.querySelectorAll('[data-tab]');
                                for(var i = 0; i < menuElements.length ; i++) {
                                  menuElements[i].addEventListener('click', change, false);
                                }
                              }

                              var clear = function() {
                                var menuElements = document.querySelectorAll('[data-tab]');
                                for(var i = 0; i < menuElements.length ; i++) {
                                  menuElements[i].classList.remove('active');
                                  var id = menuElements[i].getAttribute('data-tab');
                                  document.getElementById(id).classList.remove('active');
                                }
                              }

                              var change = function(e) {
                                clear();
                                //e.target.classList.add('active');
                                var id = e.currentTarget.getAttribute('data-tab');
                                //document.getElementById(id).classList.add('active');
                                
                                var menuElements = document.querySelectorAll('[data-tab]');
                                for(var i = 0; i < menuElements.length ; i++) {
                                var id2 = menuElements[i].getAttribute('data-tab');
                              
                              if (id2.includes(id.substring(4,7))){
                                //alert(id.substring(4,7));
                                menuElements[i].classList.add('active');
                                document.getElementById(id2).classList.add('active');
                              }
                            }
                                //alert(id);
                              }

                              bindAll();
                            }

                            var connectTabs = new Tabs();

                            var swiper = new Swiper(".mySwiper", {
                                                  slidesPerView: 4,
                                                  spaceBetween: 20,
                                                  slidesPerGroup:4,
                                                  loop: true,
                                                  loopFillGroupWithBlank: true,
                                                  pagination: {
                                                    el: ".swiper-pagination",
                                                    clickable: true,
                                                  },
                                                  navigation: {
                                                    nextEl: ".swiper-button-next",
                                                    prevEl: ".swiper-button-prev",
                                                  },

                                                  breakpoints: {
                                                  // when window width is >= 320px
                                                  144: {
                                                    slidesPerView:2,
                                                  spaceBetween: 20,
                                                  slidesPerGroup:2,
                                                  loop: true,
                                                  loopFillGroupWithBlank: true,
                                                  pagination: {
                                                    el: ".swiper-pagination",
                                                    clickable: true,
                                                  },
                                                  navigation: {
                                                    nextEl: ".swiper-button-next",
                                                    prevEl: ".swiper-button-prev",
                                                  },
                                                  },
                                                  // when window width is >= 480px
                                                  480: {
                                                    slidesPerView: 3,
                                                  spaceBetween: 20,
                                                  slidesPerGroup:3,
                                                  loop: true,
                                                  loopFillGroupWithBlank: true,
                                                  pagination: {
                                                    el: ".swiper-pagination",
                                                    clickable: true,
                                                  },
                                                  navigation: {
                                                    nextEl: ".swiper-button-next",
                                                    prevEl: ".swiper-button-prev",
                                                  },
                                                  },
                                                  // when window width is >= 640px
                                                  640: {
                                                  slidesPerView: 4,
                                                  spaceBetween: 20,
                                                  slidesPerGroup:4,
                                                  loop: true,
                                                  loopFillGroupWithBlank: true,
                                                  pagination: {
                                                    el: ".swiper-pagination",
                                                    clickable: true,
                                                  },
                                                  navigation: {
                                                    nextEl: ".swiper-button-next",
                                                    prevEl: ".swiper-button-prev",
                                                  },
                                                     }
                                                   }

                                                   }
                                                   );


                                                
              </script>

1 respuesta 1

0

El desplazamiento pasa porque al usar anclajes "#" genera un efecto de scroll, la forma de evitarlo es eliminando el evento por defecto del boton. por ejemplo, creamos un botón.

<a href="#link">Botón</a>

creamos una función Javascript que elimine el evento por defecto.

function removeEvent(evt) {
  evt.preventDefault();
}

y asignamos la función a nuestro botón.

<a href="#link" onclick="removeEvent(event);">Boton</a>

Esto debería evitar el efecto de desplazamiento al presionar tu botón.

1
  • 1
    Muchas gracias funciono perfecto el 31 mar. 2022 a las 20:18

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.