在Wordpress自定义模板中使用Jquery .click()实现选项卡

wp_enqueue_script('jquery');

<ul class="tabs">
  <li class="tab-link current" data-tab="tab1">Tab 1</li>
  <li class="tab-link" data-tab="tab2">Tab 2</li>
  <li class="tab-link" data-tab="tab3">Tab 3</li>
</ul>

<div id="tab1" class="tab-content current">
  <!-- Tab 1 content goes here -->
</div>

<div id="tab2" class="tab-content">
  <!-- Tab 2 content goes here -->
</div>

<div id="tab3" class="tab-content">
  <!-- Tab 3 content goes here -->
</div>

jQuery(document).ready(function($) {
  $('.tab-link').click(function() {
    var tabId = $(this).attr('data-tab');

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

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

.tab-link.current {
  font-weight: bold;
}

.tab-content {
  display: none;
}

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