时间戳

首页 > 解决方案 > 如何在包装器中指定 div 元素

javascript - 如何在包装器中指定 div 元素

问题描述

我正在尝试使用以下脚本，但我已将“tab-prev”和“tab-next”按钮放在 .tab-wrapper 内的 div 内，我无法弄清楚如何在其中选择它们分区？

<script>  
var Webflow = Webflow || [];
Webflow.push(function() {

$('.tab-wrapper’).on('click', '.tab-prev, .tab-next', function() {

var direction = $(this).hasClass('tab-prev') ? -1 : 1;

var tablinks = $(this).parent().find('.w-tab-menu');

var index = tablinks.find('.w--current').index() + direction;

index = index >= tablinks.children().length ? 0 : index;

tablinks.find('.w-tab-link').eq(index).trigger('click');

   });
 });
</script>

和html示例

<div class=“wrapper”&gt;
    <div class=“w-tab-menu”&gt;
         <a data-w-tab="Tab 1" class="w-tab-link">
         <a data-w-tab="Tab 2" class="w-tab-link">
    </div>
    <div class=“w-tab-panes”&gt;
         <div data-w-tab="Tab 1" class="w-tab-pane">
         <div data-w-tab="Tab 2" class="w-tab-pane">
    </div>
    <div class=“bottom-buttons”&gt;
         <a href="" class="tab-prev">Prev</a>
         <a href="" class="tab-next">Next</a>
    </div>
 </div>

标签： javascripthtml

解决方案

您可以使用它来选择上一个和下一个按钮：

var $prev = $('.tab-prev');
var $next = $('.tab-next');

推荐阅读