高级自定义字段、WordPress、Javascript 选项卡式内容

Question

(function(){
    $('ul.tabs li').on("click", function(){
        var tab_id = $(this).find("li").attr('data-tab');

        $('ul.tabs li .tab-link').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

    });

.container{
    margin: 0 auto;
}

ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current{
    background: #ededed;
    color: #222;
}

.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current{
    display: inherit;
}

<div class="container">
    <?php if( have_rows('tabs') ): ?>
    <ul class="tabs">
        <?php while ( have_rows( 'tabs' ) ) : the_row(); ?>
        <?php $index = get_row_index(); ?>
        <li class="tab-link <?php if ($index == 0): ?>current<?php endif; ?>" data-tab="tab-<?php echo $index; ?>">
            <?php echo get_sub_field('services_title'); ?></li>
        <?php endwhile; ?>
    </ul>

    <?php while( have_rows('tabs') ): the_row(); ?>
    <?php $index = get_row_index(); ?>
    <div id="tab-<?php echo $index; ?>" class="tab-content <?php if ($index == 0): ?>current<?php endif; ?>">
        <?php echo get_sub_field('services_description'); ?>
    </div>
    <?php endwhile; ?>
    <?php else : ?>
    <?php // no rows found ?>
    <?php endif; ?>
</div>

**

我正在寻求帮助，让我的 javascript 最终连接到我的 HTML/PHP WordPress 代码。我相信 javascript 没有正确定位某些东西，以便能够将 current 类添加到 tab-echo index 部分。

我使用 php 来获取每个部分的标签 - 索引号，只是在添加和删除当前类别到附加帖子时遇到了麻烦。

Answer 1

您的 js 文件存在一些问题。试试这个：

jQuery(document).ready(function($) {
  $(".tabs li").each(function() {
    $(this).on("click", function() {
      var tab_id = $(this).attr('data-tab');

      $('.tabs .tab-link.current').removeClass('current');
      $('.tab-content.current').removeClass('current');

      $(this).addClass('current');
      $("#" + tab_id).addClass('current');
    });
  });
});

您可以看到这个jsfiddle 进行演示。