Usando una biblioteca de pestañas llamada tabit.js . Se inicializa bien con ID y una pestaña, pero ahora tengo varias pestañas en una página y me resulta difícil hacer que esto funcione dinámicamente sin fijar una ID para ambas. Pensé en hacerlo de la siguiente manera con cada uno:
$('.tabs').each(function () { const element = $(this) const options = { buttonSelector: '[data-target]', buttonActiveClass: 'is-active', contentSelector: '[data-content]', buttonAttribute: 'data-target', contentAttribute: 'data-content', contentActiveClass: 'is-active', } if (element) { /* eslint-disable no-new */ new Tabit(element, options) } })Pero Tabit implica que no encuentra un elemento inicializado al generar:
TypeError no detectado: el
new Tabitrequiere un elemento DOM como primer argumento.
Ver JSFiddle aquí: https://jsfiddle.net/e8y0d5um/7/
¿Alguna idea de cómo hacer que esto funcione? Le resulta muy difícil encontrar soluciones de varias pestañas en la misma página que no tengan una identificación única.
this en each método se refiere al elemento DOM. No hay necesidad de envolverlo en $() . Prueba esto
$('.tabs').each(function () { const element = this const options = { buttonSelector: '[data-target]', buttonActiveClass: 'is-active', contentSelector: '[data-content]', buttonAttribute: 'data-target', contentAttribute: 'data-content', contentActiveClass: 'is-active', } if (element) { /* eslint-disable no-new */ new Tabit(element, options) } })