这是我的 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 :
$(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;
});
});
当添加关于代码以在页面中加载时。我想显示第一个链接已经点击加载脚本。 它的意思是“关于 1 的信息”。在页面加载中可见。 我该怎么做。
例子在这里 JS Fiddle
最佳答案
更新了你的 JSfiddle。检查一下。您也可以在没有 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;
});
});
你的 CSS
.hide{
display:none;
}
.show{
display:inline
}
您的 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>
关于javascript - jQuery - 在页面加载时默认显示第一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36303696/