使用按钮调用内容。 Js问题 [英] Call content with button. Js Issue
本文介绍了使用按钮调用内容。 Js问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是对问题的跟进
点击< label for =panel2-radio>点击以显示Tab2< / label>
操作应该是与点击< li class =tab-title>< label for =panel2-radio> Tab 2< / li>
When clicking <label for="panel2-radio">Click to show Tab2</label>
the action should be the same as when clicking <li class="tab-title"><label for="panel2-radio">Tab 2</li>
我无法弄清楚我做错了什么。
I can't figure out what I'm doing wrong.
$().ready(function(){
$('.tab-title>label').click(function(e){
e.preventDefault();
var index = $(this).parent().index();
$(this).parent().addClass('active')
.siblings().removeClass('active')
.parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
.eq(index).addClass('active');
});
})
.vertical-tabs:after {
content: "";
display: table;
clear: both;
}
.vertical-tabs {position: relative;margin-left: 200px;margin-top: 5%;margin-bottom: 5%}
.tabs {
position: relative;
float: left;
width: 200px;
padding-left: 0;
margin-top: 220px;
margin-bottom: 0px;
margin-left: -200px;
}
.tabs1 {
position: relative;
float: left;
width: 200px;
padding-left: 0;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -200px;
}
.tabs li {
position: relative;
list-style: none;
}
.tabs li:after {
content: "";
display: table;
clear: both;
}
.tabs li label{
position: relative;
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-align: center;
background-color: #fbfbfb;
border: 1px solid #ddd;
}
.tabs li.active label {
z-index: 2;
background-color: #424b59;
color: #c2b697;
border-right: 1px solid white;
}
.tabs-content{margin-left: 25px;}
.tabs-content .content-tab {
display: none;
padding: 10px;
}
.tabs-content .content.active{
display: inline-block;width: 100%;}
.radio,
.content-tab {
display: none;
}
.radio:checked+.content-tab.active, .content-tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
<ul class="tabs vertical" data-tab="">
<li class="tab-title active"><label for="panel1-radio">Tab 1</li>
<li class="tab-title"><label for="panel2-radio">Tab 2</li>
</ul>
<div class="tabs-content">
<input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
<div class="content-tab active" id="panela1" aria-hidden="false">
<p>This is tab 1</p>
<label for="panel2-radio">Click to show Tab2</label>
</div>
<input type="radio" name="show-panel" id="panel2-radio" class="radio">
<div class="content-tab" id="panelb1" aria-hidden="false">
<p>This is tab 2</p>
</div>
</div>
推荐答案
只需听取 .content-tab
标签的点击事件,然后触发 tab-title
标签事件, tab2
在您的情况下如下:
Just listen on the click event of .content-tab
labels and trigger the event of tab-title
lables, tab2
in your case like :
$('.content-tab label').click(function(e) {
$('.tab-title label[for="' + $(this).attr('for') + '"]').click();
});
$(function() {
$('.tab-title>label').click(function(e) {
e.preventDefault();
var index = $(this).parent().index();
$(this).parent().addClass('active')
.siblings().removeClass('active')
.parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
.eq(index).addClass('active');
});
$('.content-tab label').click(function(e) {
$('.tab-title label[for="' + $(this).attr('for') + '"]').click();
});
})
.vertical-tabs:after {
content: "";
display: table;
clear: both;
}
.vertical-tabs {
position: relative;
margin-left: 200px;
margin-top: 5%;
margin-bottom: 5%
}
.tabs {
position: relative;
float: left;
width: 200px;
padding-left: 0;
margin-top: 220px;
margin-bottom: 0px;
margin-left: -200px;
}
.tabs1 {
position: relative;
float: left;
width: 200px;
padding-left: 0;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -200px;
}
.tabs li {
position: relative;
list-style: none;
}
.tabs li:after {
content: "";
display: table;
clear: both;
}
.tabs li label {
position: relative;
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-align: center;
background-color: #fbfbfb;
border: 1px solid #ddd;
}
.tabs li.active label {
z-index: 2;
background-color: #424b59;
color: #c2b697;
border-right: 1px solid white;
}
.tabs-content {
margin-left: 25px;
}
.tabs-content .content-tab {
display: none;
padding: 10px;
}
.tabs-content .content.active {
display: inline-block;
width: 100%;
}
.radio,
.content-tab {
display: none;
}
.radio:checked+.content-tab.active,
.content-tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
<ul class="tabs vertical" data-tab="">
<li class="tab-title active"><label for="panel1-radio">Tab 1</a></li>
<li class="tab-title"><label for="panel2-radio">Tab 2</a></li>
</ul>
<div class="tabs-content">
<input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
<div class="content-tab active" id="panela1" aria-hidden="false">
<p>This is tab 1</p>
<label for="panel2-radio">Click to show Tab2</label>
</div>
<input type="radio" name="show-panel" id="panel2-radio" class="radio">
<div class="content-tab" id="panelb1" aria-hidden="false">
<p>This is tab 2</p>
</div>
</div>
这篇关于使用按钮调用内容。 Js问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文