[英]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.