通过点击导航菜单转出不同的main内容

点击header中对应的 a 标签，切换main中对应的div内容，如何写JS？
main中的1111111，2222222....，默认只显示一个，如：默认显示的是1111111，当点击<a href="#">2222222</a><br />时，就显示2222222 <html>
<head>
</head>
<body>
  <div id="header">
     <a href="#">1111111</a><br />
     <a href="#">2222222</a><br />
     <a href="#">3333333</a><br />
  </div>
 
  <div id="main">
     <div class="1">1111111</div>
     <div class="2">2222222</div>
     <div class="3">3333333</div>
  </div>
</body>
</html>
 JS切换内容

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
    a.on{color:#f00}#main div.on{background-color:#f00;display:block;}
    #main div{display:none;}
    </style>
    </head><body>
      <div id="header">
         <a id="anchor1" class="on" href="#">1111111</a><br />
         <a id="anchor2" href="#">2222222</a><br />
         <a id="anchor3" href="#">3333333</a><br />
      </div>
     
      <div id="main">
         <div id="anchor1_main" class="on">1111111</div>
         <div id="anchor2_main">2222222</div>
         <div id="anchor3_main">3333333</div>
      </div>
    <script type="text/javascript">
    jQuery(function($){
    $('a').click(function(){
    var att=$(this).attr('id');
    var attmain='#'+att+'_main';

    $('#header').find('a').not($(this)).removeClass('on');
    $(this).addClass('on');

    $('#main').find('div').not($(attmain)).removeClass('on');
    $(attmain).addClass('on');
    });
    });
    </script>
    </body>
    </html>