简体   繁体   English

我有 2 个 UI 选项卡。 我需要在单击该选项卡外的按钮时激活一个特定选项卡

[英]I have 2 UI tabs. I need to activate one specific tab on clicking a button outside that tab

I'm new to Javascript.我是 Javascript 的新手。 I have a UI tab element.我有一个 UI 选项卡元素。 Which has 2 tabs.其中有 2 个选项卡。 I have a button on the bottom.我在底部有一个按钮。 On clicking that button it should go up and activate the second tab.单击该按钮时,它应该 go 向上并激活第二个选项卡。

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

I have already smooth scroll.我已经平滑滚动了。 When clicking on button it should automatically go up and activate that tab.单击按钮时,它应自动向上 go 并激活该选项卡。 But don't know how to do it, it is not working for me.但不知道该怎么做,它不适合我。


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

I have used $("label:last").trigger("click") in code replace and check我在代码替换和检查中使用$("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")


    });

You can set the checked value by adding a handler on the button as follows:您可以通过在按钮上添加处理程序来设置选中值,如下所示:

Just add the following:只需添加以下内容:

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

This will trigger the checked state in your css.这将触发 css 中检查的 state。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何通过单击按钮启用一个特定选项卡? - How can I enable one specific tab by clicking the button? 如果选项卡在 ajax 调用完成之前切换,它会影响其他选项卡。 我该如何预防? - if tab switches before ajax call is complete, it effects other tabs. how can I prevent? popup.html中的chrome.tabs.create正在打开无限数量的标签。 如何打开一个标签页? - chrome.tabs.create in popup.html is opening infinite number of tabs. How to open one tab? Bootstrap可切换标签。 将鼠标悬停在`.nav-tabs&gt; li`上方时如何显示.tab窗格内容,然后在鼠标离开时隐藏该内容? - Bootstrap Togglable tabs. How can I show the .tab-pane content when I hover over the `.nav-tabs > li`, then hide the content when the mouse leaves? 我想在单击按钮时激活选项卡菜单项 - I want to activate tab menu item on a button click 单击jquery-ui选项卡时需要运行一个函数,我做错了什么? - I need to run a function when a jquery-ui tab is clicked, what have I done wrong? 引导选项卡。 通过jQuery将边框添加到当前选项卡 - Bootstrap tabs. Add border to current tab through jquery jQuery UI选项卡:从选项卡中链接到下一个/特定选项卡 - Jquery UI Tabs: Link to next/specific tab from within tab 单击选项卡时如何激活功能? - How to activate a function on clicking a tab? 我在 Chrome 91 中的选项卡更新/激活/焦点事件中收到错误“现在无法编辑选项卡(用户可能正在拖动选项卡)” - I'm getting an error "Tabs cannot be edited right now (user may be dragging a tab)" on tab update/activate/focus event in chrome 91
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM