javascript - 用按钮调用内容。JS问题
问题描述
这是问题的后续行动
单击时<label for="panel2-radio">Click to show Tab2</label>
的动作应与单击时相同<li class="tab-title"><label for="panel2-radio">Tab 2</li>
我无法弄清楚我做错了什么。
$().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
在您的情况下,例如:
$('.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>
推荐阅读
- angular - Angular - 从不同的包中导入模块的问题
- bash - 您将如何创建终端别名来实时查看最新的日志文件更新?
- amazon-web-services - 是否可以使用 CodePipeline 将工件部署到不同 AWS 账户中的 s3 存储桶?
- python - 具有一个标签和一个特征的 TensorFlow
- android - Snackbar 中的 Gif 图像
- java - 在更新 Comparator 比较函数的计数时返回列表的索引
- asp.net - 动态自定义 RazorViewEngine?
- tensorflow - MNIST - tf.estimator.DNNClassifier
- database - 将 Excel 数据保存到 Access 数据库
- c# - 健康滑块如果启用了语句线渲染器 Unity