javascript - 我有 2 个 UI 选项卡。我需要通过单击该选项卡外的按钮来激活一个特定选项卡

Question

我是 Javascript 新手。我有一个 UI 选项卡元素。其中有 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

<a href="#" id="tab2" class="btn" alt="Tab2">Tab 2</a>
<a href="#" id="tab1" class="btn" alt="Tab2">Tab 1</a>

<script>
        $(document).ready(function(){
            $('#tab2').on('click', function (event) {
                $('#consultation').prop("checked", true);
            });
            $('#tab1').on('click', function (event) {
                $('#brochure').prop("checked", true);
            });
        });
</script>