Bootstrap4 - 从另一个 button/a-tag 触发选项卡-link

Question

我正在尝试建立一个作品集，让我的作品显示在每个选项卡窗格中。但是，我希望第一个选项卡窗格为我的每个作品显示一个 link/button，例如概览，并在单击时触发选项卡-link。

我已经添加了 links，他们更改了选项卡窗格而不是选项卡-link。而且它只有效一次...

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class container>
        <div class="row">
            <div class="col-3">
                   <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
                    <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab">
                        All
                    </a>
                    <a class="nav-link" id="v-pills-project1-tab" data-toggle="pill" href="#v-pills-project1" role="tab">
                        Project 1
                    </a>
                    <a class="nav-link" id="v-pills-project2-tab" data-toggle="pill" href="#v-pills-project2" role="tab">
                        Project 2
                    </a>
                    <a class="nav-link" id="v-pills-project3-tab" data-toggle="pill" href="#v-pills-project3" role="tab">
                        Project 3
                    </a>
                </div>
            </div>
            <div class="col-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel">
                        <div class="row">
                            <a class="col-4" data-toggle="pill" href="#v-pills-project1" role="tab">project1</a>
                            <a class="col-4" data-toggle="pill" href="#v-pills-project2" role="tab">project2</a>
                            <a class="col-4" data-toggle="pill" href="#v-pills-project3" role="tab">project3</a>    
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-project1" role="tabpanel">1</div>
                    <div class="tab-pane fade" id="v-pills-project2" role="tabpanel">2</div>
                    <div class="tab-pane fade" id="v-pills-project3" role="tabpanel">3</div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

不是从您的投资组合按钮调用选项卡，

<a class="nav-link" id="v-pills-project1-tab" data-toggle="pill" href="#v-pills-project1" role="tab">Project 1</a>

在 JavaScript

中的选项卡上触发点击事件

工作片段如下：

$(document).ready(function() {
  $("#myBtn1").click(function() {
    $("#v-pills-project1-tab").trigger('click');
  });
  $("#myBtn2").click(function() {
    $("#v-pills-project2-tab").trigger('click');
  });
  $("#myBtn3").click(function() {
    $("#v-pills-project3-tab").trigger('click');
  });


});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class container>
  <div class="row">
    <div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab">
                        All
                    </a>
        <a class="nav-link" id="v-pills-project1-tab" data-toggle="pill" href="#v-pills-project1" role="tab">
                        Project 1
                    </a>
        <a class="nav-link" id="v-pills-project2-tab" data-toggle="pill" href="#v-pills-project2" role="tab">
                        Project 2
                    </a>
        <a class="nav-link" id="v-pills-project3-tab" data-toggle="pill" href="#v-pills-project3" role="tab">
                        Project 3
                    </a>
      </div>
    </div>
    <div class="col-9">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel">
          <div class="row">
            <a class="col-4" data-toggle="pill" id='myBtn1'>project1</a>
            <a class="col-4" data-toggle="pill" id='myBtn2'>project2</a>
            <a class="col-4" data-toggle="pill" id='myBtn3'>project3</a>
          </div>
        </div>
        <div class="tab-pane fade" id="v-pills-project1" role="tabpanel">1</div>
        <div class="tab-pane fade" id="v-pills-project2" role="tabpanel">2</div>
        <div class="tab-pane fade" id="v-pills-project3" role="tabpanel">3</div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap4 - 从另一个 button/a-tag 触发选项卡-link

Bootstrap4 - Trigger tab-link from another button/a-tag

tabs

twitter-bootstrap

bootstrap-4