Javascript 单击时显示/隐藏div-如何在页面加载时显示div 1？

我已经学会了如何使用javascript显示和隐藏div，但是如何在页面加载时显示第一个div而不必单击它呢？基本上，我创建了一个菜单与6个不同的链接。我希望第一个链接div在页面加载时显示，然后在单击其他链接时隐藏

 <div class="nav">
    <ul id="menu">
        <li id="1"><a href="#">Topic One</a></li>
        <li id="2"><a href="#">Topic Two</a></li>
        <li id="3"><a href="#">Topic Three</a></li>

    </ul>
</div>
<div class="main">
    <div id="1" class="content">
    <h1>Page 1</h1>
    <p>First section of content.</p>
    </div>
    <div id="2" class="content">
    <h1>Page 2</h1>        
    <p>Second section of content</p>
    </div>
    <div id="3" class="content">        
    <h1>Page 3</h1>
    <p>Third section of content.</p>
    </div>               
  </div>
 </div> 

第1页
第一节内容

第2页
第二部分内容

第3页
第三部分内容

JavaScript

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('#menu a').click(function(e){
 hideContentDivs();
 var tmp_div = $(this).parent().index();
 $('.main div').eq(tmp_div).show();
 });

function hideContentDivs(){
$('.main div').each(function(){
$(this).hide();});
}
hideContentDivs();
});//]]>  

</script>    

//  

正如我在评论中提到的，以数字开头的ID是一个坏主意，而且你有重复的ID，更糟糕的是，保持ID的唯一性

这里有两种方法，一种是使用CSS隐藏div，然后使用Jquery显示它们。另一种方法是使用jQuery来隐藏它们……因为这是您已经开始的路径，让我们使用它

但首先让我们修复您的html

$（“#菜单a”）。单击（功能（e）{
var target=$（this.attr（“href”）；
$（“.main.content”）.not（target.hide（）；
$（target.show（）；
返回（假）；
});
//在装载时隐藏div
$（“.main.content”）.hide（）；
//设定初始目标
var initialTarget=“#Section1”；
//如果来自书签，则覆盖该目标。例如www.mypage.com#第2节
//使用有意义href的另一个原因
如果（location.hash.length>0）{initialTarget=location.hash；}
$（initialTarget.show（）






第1页
第一节内容

第2页
第二部分内容

第3页
第三部分内容

ID以数字开头是个坏主意，您将无法使用CSS将其作为目标。感谢您的建议和帮助，这非常有效！但有一件事。。单击链接时，如何阻止屏幕自动向下滚动到div区域？添加
return（false）
到单击处理程序以禁用单击的默认操作。