[英]How can I collapse all tabs on page load?
I am using Javascript code I got online to collapse and expand tabs.我正在使用我在线获取的 Javascript 代码来折叠和展开选项卡。 The issue is I want the tabs to be collapsed when the page loads and I cant figure out how to do this.
问题是我希望在页面加载时折叠选项卡,但我不知道如何执行此操作。
I am using this code from Arpits Dynamics CRM blog and I have altered the tab names.我正在使用 Arpits Dynamics CRM 博客中的此代码,并且更改了选项卡名称。
Can anyone advise how I can get the tabs to collapse on load not only on click?谁能建议我如何让标签不仅在点击时在加载时折叠?
$(document).ready(function () {
// Collapsible tabs for Customer Information Tab (change the tab name in your case)
$('h2:contains("Customer Information")').html("Customer Information <span id='collapseId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");
// Collapsible tabs for Product Information Tab
$('h2:contains("Product Information")').html("Product Information <span id='collapseIdP' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandIdP' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");
// For Customer Information Tab
// Hide Collapse Icon on load
$('#expandId').hide();
// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
$("#collapseId").click(function () {
$('#expandId').show();
$('#collapseId').hide();
$("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeIn(1000);
});
// Show collapse icon, hide expand icon and show respective tab on click of expand icon
$("#expandId").click(function () {
$('#collapseId').show();
$('#expandId').hide();
$("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeOut();
});
// For Product Information Tab
$('#expandIdP').hide();
$("#collapseIdP").click(function () {
$('#expandIdP').show();
$('#collapseIdP').hide();
$("div[data-name='tab_4']").fadeIn(1000);
});
$("#expandIdP").click(function () {
$('#collapseIdP').show();
$('#expandIdP').hide();
$("div[data-name='tab_4']").fadeOut();
});
});
You have several approaches available to you:您可以使用多种方法:
Set visibility with CSS.使用 CSS 设置可见性。 jQuery's
show()
and hide()
methods simply toggle the display
property, so set it to none
with a CSS class. jQuery 的
show()
和hide()
方法只是切换display
属性,因此使用 CSS 类将其设置为none
。
Use a class on each tab and call $('.that-class').hide();
在每个选项卡上使用一个类并调用
$('.that-class').hide();
on page load ( document.ready
).在页面加载(
document.ready
)。
Other advice: Most modern tab scripts don't rely on IDs because that creates tight coupling with your markup--if the IDs change or more are added you have to change your script.其他建议:大多数现代选项卡脚本不依赖于 ID,因为这会与您的标记紧密耦合——如果 ID 更改或添加更多,您必须更改脚本。 Use classes instead, and reference content by index or location.
改用类,并按索引或位置引用内容。 For example:
例如:
$('.my-tab-class').click(function() {
$('.my-tab-content-class').hide(); // close all
$(this).next('.my-tab-content-class').show(); // open just the adjacent one
}
Or, for tab content not adjacent:或者,对于不相邻的选项卡内容:
$('.my-tab-class').click(function() {
var tabIndex = $(this).index();
$('.my-tab-content-class').hide(); // close all
// open just the one with the matching index location
$('.my-tab-content-class').eq(tabIndex).show();
}
The same is true for indicator icons, etc. Reference them by location, not clumsy IDs or other specific strings:指示器图标等也是如此。按位置引用它们,而不是笨拙的 ID 或其他特定字符串:
$(this).find('.my-icon-class').toggle();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.