将按钮链接到另一个按钮

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。

我要实现的目标是，当您单击Tab2内容部分中的Tab1按钮时，其操作与您在{{ 1}}部分。

有图片：

现在Tab2处于活动状态，您可以将内容链接到tabs vertical，但是当您单击Tab1内容字段中的按钮Tab1时，我想转到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来基于所选复选框添加和删除类