Bootstrap4 - запуск ссылки на вкладку с другой кнопки / тега - PullRequest
Новая
       10

Bootstrap4 - запуск ссылки на вкладку с другой кнопки / тега

0 голосов
/ 28 октября 2019

Я пытаюсь настроить портфолио, где мои работы отображаются на каждой вкладке. Однако мне бы хотелось, чтобы на первой панели вкладок отображалась ссылка / кнопка для каждой из моих работ, например обзор, и при нажатии была активирована ссылка на вкладку.

Я добавил ссылки, и они изменили вкладку. панель, но не ссылка на вкладку. И это работает только один раз ... 

<!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>

1 Ответ

0 голосов
/ 28 октября 2019

Вместо вызова вкладки из кнопок вашего портфеля, 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...