我正在尝试创建一个允许发生两个事件的 jQuery 脚本:
- 创建选项卡式内容,其中只有第一个选项卡的内容 (
.current
加载页面时仅显示第一个选项卡的内容 ( ) - 创建一个“显示所有选项卡式内容”按钮 (
.toggle_tabs
),用于切换所有选项卡式内容的可见性
代码成功地对每个选项卡的内容进行了选项卡;问题是这样的:
- 如果我加载页面,然后单击
.toggle_tabs
,具有类的选项卡.current
卡是唯一内容不可见的选项卡 - 如果我加载页面,单击任何选项卡一次,然后单击
.toggle_tabs
,所有选项卡内容都将可见。
单击时如何使所有选项卡式内容可见,.toggle_tabs
而不必先单击其中一个选项卡?
当前代码:
/* jQuery */
$('#hb_container div.tab-link').click(function () {
var tab_id = $(this).data('tab');
$('#hb_container div').removeClass('current');
$('.tab-content').removeClass('current').removeClass('active');
$(this).addClass('current');
$("#" + tab_id).addClass('current').addClass('active');
});
$('.toggle_tabs').click(function () {
$('.tab-content').each(function () {
if ( ($(this).hasClass('current')) && ( $(this).hasClass('active') === false) ) {
$(this).removeClass('current');
} else {
$(this).addClass('current');
}
});
});
/* Tabs */
<div id="hb_container">
<div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div>
<div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div>
<div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">Apl.<br>No.</div></div>
<div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">Struc.<br>Eng.</div></div>
</div>
/* Tabbed content */
<div id="tab-1" class="tab-content current" style="margin-top: 24px">
<div class="tab-content-title">Attachment Upload</div>
<div class="single_col_container">
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
[input]
</div>
</div>
</div>
<div id="tab-2" class="tab-content" style="margin-top: 24px">
<div class="tab-content-title">Job Info</div>
<div class="single_col_container">
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
[input]
</div>
</div>
</div>
/* CSS */
#hb_container {
margin: 8px 0 8px 8px;
width: 984px;
height: 54px;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
}
.tab-link {
background: #222;
color: #ddd;
cursor: pointer;
float: left;
font-family: Roboto;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
line-height: 14px;
margin: 0 8px 0 0;
width: 54px !important;
height: 54px;
}
.tab-link:hover {
background: #181818;
color: #ffcc00;
}
.tab-link-inner {
margin-top: 11px;
}