[英]jQuery - Show first div as default on page load
This is my HTML code: 这是我的HTML代码:
<!-- Unordered list - navigation -->
<ul id="linkwrapper">
<li><a id="link1" href="#">link1</a></li>
<li><a id="link2" href="#">link2</a></li>
<li><a id="link3" href="#">link3</a></li>
</ul>
<!-- Hidden Elements-->
<div id="infocontent">
<div id="link1content">Information about 1.</div>
<div id="link2content">Information about 2.</div>
<div id="link3content">Information about 3.</div>
</div>
JQuery : jQuery的:
$(document).ready(function(){
var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs
$('#linkwrapper a').click(function(){
var $contentDiv = $("#" + this.id + "content");
if($contentDiv.is(":visible")) {
$contentDiv.hide(); // Hide Div
} else {
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
}
return false;
});
});
When add about code to load in page. 添加有关要加载到页面中的代码时。 i want to show up first link already click as load the script. 我想显示第一个链接已单击作为加载脚本。 It means "Information about 1." 意思是“关于1的信息”。 visible in page load. 在页面加载中可见。 how can i do it. 我该怎么做。
Updated your JSfiddle. 更新了您的JSfiddle。 Check that. 检查一下。 You can do this without JQuery too. 您也可以在没有JQuery的情况下执行此操作。
$(document).ready(function(){
var $allContentDivs = $('#infocontent div') // Hide All Content Divs
$('#linkwrapper li a').click(function(){
var $contentDiv = $("#" + this.id + "content");
if($contentDiv.is(":visible")) {
$contentDiv.hide(); // Hide Div
} else {
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
}
return false;
});
});
Your CSS 您的CSS
.hide{
display:none;
}
.show{
display:inline
}
Your HTML: 您的HTML:
<!-- Unordered list - navigation -->
<ul id="linkwrapper">
<li><a id="link1" class="show" href="#">link1</a></li>
<li><a id="link2" href="#">link2</a></li>
<li><a id="link3" href="#">link3</a></li>
</ul>
<!-- Hidden Elements-->
<div id="infocontent">
<div id="link1content" class="show">Information about 1.</div>
<div id="link2content" class="hide">Information about 2.</div>
<div id="link3content" class="hide">Information about 3.</div>
</div>
You could achieve it by updating your selector 您可以通过更新选择器来实现
var $allContentDivs = $('#infocontent div:not(:first-child)').hide();
and initiating again the $allContentDivs inside your click event 并再次在click事件中启动$ allContentDivs
$allContentDivs = $('#infocontent div');
Try this : hide all dive except first using following code 试试这个:隐藏所有潜水,除了首先使用以下代码
$('#infocontent div:not(:first)').hide();//hide all but first
var $allContentDivs = $('#infocontent div');//get all divs
只需添加.not(':first')就可以了:
var $allContentDivs = $('#infocontent div').not(':first').hide();
var $allContentDivs = $('#infocontent div').hide();
$( "#infocontent div" ).first().show();
How about you show the first div after hiding all? 隐藏所有内容后如何显示第一个div?
Like this: 像这样:
$('#infocontent div').first().show();
$(document).ready(function(){
var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs
$('#linkwrapper a').click(function(){
var $contentDiv = $("#" + this.id + "content");
if($contentDiv.is(":visible")) {
$contentDiv.hide(); // Hide Div
} else {
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
}
return false;
});
$('#linkwrapper a').eq(0).click();//manually click the first anchor using .eq()
});
Hide everything and have a manual click on the first link so that it will show 隐藏所有内容并手动单击第一个链接,以便显示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.