javascript - jQuery - 在页面加载时默认显示第一个 div

Question

这是我的 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

Answer 1

更新了你的 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>