我在Rails应用程序中使用Stimulus.js创建了一个标签导航。然而，当我点击一个标签时，内容并不显示，console.log显示点击的标签索引返回-1。如何解决此问题？
下面是我的Stimulus控制器（tabs_controller.js）：

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["tab", "content"];

  connect() {
    this.showTab(0);
  }

  changeTab(event) {
    event.preventDefault();
    this.showTab(this.tabTargets.indexOf(event.target));
    console.log("Clicked tab index:", this.tabTargets.indexOf(event.target));
  }

  showTab(index) {
    this.tabTargets.forEach((tab, i) => {
      tab.classList.toggle("tab-active", i === index);
      if (i === index) {
        this.contentTargets[i].removeAttribute("hidden");
      } else {
        this.contentTargets[i].setAttribute("hidden", true);
      }
    });
  }
}

下面是相应的HTML视图：

<div data-controller="tabs">
  <ul class="tabs">
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab" class="tab-active">Tab 1</a>
    </li>
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab">Tab 2</a>
    </li>
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab">Tab 3</a>
    </li>
  </ul>

  <div data-content-target="content" class="tab-content">
    <p>Tab 1 content...</p>
  </div>
  <div data-content-target="content" class="tab-content" hidden>
    <p>Tab 2 content...</p>
  </div>
  <div data-content-target="content" class="tab-content" hidden>
    <p>Tab 3 content...</p>
  </div>
</div>

当我单击任何选项卡时，浏览器控制台显示以下输出：

Clicked tab index: -1

我想有一个选项卡菜单，显示内容的基础上的选择。