У меня есть 2 вкладки пользовательского интерфейса. Мне нужно активировать одну конкретную вкладку при нажатии кнопки за пределами этой вкладки

Question

Я новичок в Javascript. У меня есть элемент вкладки пользовательского интерфейса. Который имеет 2 вкладки. У меня есть кнопка внизу. При нажатии на эту кнопку она должна подняться и активировать вторую вкладку.

<style>
        .tab-container {
    overflow-x: hidden;
    color: #fff;
    width: 35%;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.activeTab-indicator {
  display: inline-block;
  height: 2px;
  width: 50%;
  background-color: #fff;
  transition: transform 0.4s ease-out;
}

.tabHeader-container {
    display: flex;
    justify-content: space-between;
    label{
//      border-radius: 10px;
    }
}

.tabContent-container {
  display: flex;
  transition: transform 0.4s ease-out;
}

.tabHeader {
    cursor: pointer;
    color: #000;
    transition: color 0.4s ease;
    padding: 19px 20px;
    flex-grow: 1;
    text-transform: uppercase;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    letter-spacing: 0.4px;
    width: 50%;
}

.tabContent {
    width: 100%;
    flex-shrink: 0;
    padding: 30px 30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    height: 100%;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tabContent h4 {
    margin: 0px 0px 20px 0px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.radioInput:nth-of-type(1):checked ~ .tabContent-container {
  transform: translateX(0);
}

.radioInput:nth-of-type(1):checked ~ .tabHeader-container .tabHeader:nth-of-type(1) {
    color: $primary;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
}


.radioInput:nth-of-type(2):checked ~ .tabContent-container {
  transform: translateX(-100%);
}

.radioInput:nth-of-type(2):checked ~ .tabHeader-container .tabHeader:nth-of-type(2) {
    color: $primary;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
}
    </style>

<div class="tab-container">
        <input type="radio" name="radio" class="radioInput" id="consultation" checked hidden/>
        <input type="radio" name="radio" class="radioInput" id="brochure" hidden/>
        <div class="tabHeader-container">
          <label for="consultation" class="tabHeader">Tab1</label>
          <label for="brochure" class="tabHeader">Tab2</label>
        </div>
        <div class="tabContent-container">
          <div class="tabContent consultation-content">
            <h4>Tab 1</h4>

          </div>
          <div class="tabContent brochure-content">
            <h4>Tab 2</h4>

          </div>
        </div>
      </div>


<a href="#" class="btn" alt="Tab2">Tab 2</a>




<script>
    $('.tabs-stage div').hide();
    $('.tabs-stage div:first').show();
    $('.tabs-nav li:first').addClass('tab-active');


    $('.tabs-nav a').on('click', function (event) {
    event.preventDefault();
    $('.tabs-nav li').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage section').hide();
    $($(this).attr('href')).show();
    });
    </script>

У меня уже плавная прокрутка. При нажатии на кнопку он должен автоматически подняться и активировать эту вкладку. Но не знаю, как это сделать, у меня это не работает.

Answer 1

Вы можете установить проверенное значение, добавив обработчик на кнопку следующим образом:

Просто добавьте следующее:

  $('.btn').on('click', function (event) {
     $('#brochure').prop('checked', true);
  });

Это вызовет проверенное состояние в вашем CSS.

Answer 2

Я использовал $("label:last").trigger("click") в коде заменить и проверить

    $('.tabs-stage div:first').show();
    $('.tabs-nav li:first').addClass('tab-active');


    $('#tab2').on('click', function (event) {
    event.preventDefault();


    $("label:last").trigger("click")


    });