将按钮链接到另一个按钮[关闭]

Question

我真的不知道如何用英语正确解释它，但我想将一个按钮链接到一个动作。

例子：

我有垂直选项卡，当您选择其中一个选项卡时，会显示相关内容。

<div class="vertical-tabs">
<ul class="tabs vertical" data-tab="">  
    <li class="tab-title active"><a href="#panela1" aria-selected="true" tabindex="0">Tab 1</a></li>
    <li class="tab-title"><a href="#panelb1" aria-selected="false" tabindex="-1">Tab 2</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panela1" aria-hidden="false" >
        <p>This is tab 1</p>
        <button>Tab2</button>
    </div>
    <div class="content" id="panelb1" aria-hidden="false" >
        <p>This is tab 2</p>
    </div>
</div>

在Tab1 内容中有一个按钮Tab2。

我想要实现的是，当您单击 Tab1 的内容部分中的 Tab2 按钮时，操作与单击 tabs vertical 部分中的 Tab2 时的操作相同。

有图片：

现在Tab1 处于活动状态，您获得链接到Tab1 的内容，但是当您单击Tab1 的内容字段中的按钮Tab2 时，我想转到Tab2 的内容

希望我已经充分解释了我想要实现的目标。

Answer 1

您可以将按钮变成标签，然后使用单选显示相应的选项卡：

.radio,
.content {
  display: none;
}

.radio:checked+.content {
  display: block;
}

<div class="vertical-tabs">
  <ul class="tabs vertical" data-tab="">
    <li class="tab-title active"><label for="panel1-radio">Tab 1</a></li>
    <li class="tab-title"><label for="panel2-radio">Tab 2</a></li>
  </ul>
  <div class="tabs-content">
    <input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
    <div class="content" id="panela1" aria-hidden="false">
      <p>This is tab 1</p>
      <label for="panel2-radio">Click to show Tab2</label>
    </div>
    <input type="radio" name="show-panel" id="panel2-radio" class="radio">
    <div class="content" id="panelb1" aria-hidden="false">
      <p>This is tab 2</p>
    </div>
  </div>

如果您想突出显示列表中的选项卡，您将不得不添加一些 js 来根据选中的复选框添加和删除类