菜单链接显示/隐藏另一个div中的内容

我正在试图弄清楚如何编写一个脚本，当在左侧导航栏中单击链接时，它将在右侧主列中显示文本。 因此，当您第一次到达页面时，网站的主要部分不会显示任何内容。 仅在单击链接后才会显示内容（更具体地说是页面）。 单击其他链接时，将隐藏先前的内容，并显示新文本。

 
 
Topic One
 
Topic Two
 
Topic Three
 
 
 
 
 
Show Page1
 
 
 
Show Page2
 
 
 
Show Page3
 
  

Answer 1

只有几行jQuery。 这是JSfiddle – http://jsfiddle.net/dangoodspeed/M3ZhV/ ，这里是代码：

 $(function() { var curPage=""; $("#menu a").click(function() { if (curPage.length) { $("#"+curPage).hide(); } curPage=$(this).data("page"); $("#"+curPage).show(); }); }); 

Answer 2

如果您单击该链接并隐藏其他内容，这将显示您想要的内容：

 $('#link1').click(function(){ $('#content1').show(); $('#content2').hide(); $('#content3').hide(); ); $('#link2').click(function(){ $('#content2').show(); $('#content1').hide(); $('#content3').hide(); ); $('#link3').click(function(){ $('#content3').show(); $('#content2').hide(); $('#content1').hide(); ); 

例如，如果单击link1 ，将显示link1 ， content1和content3将隐藏。